css - CSS Div 的宽度自动填充整个父 Div

Question

这是我的代码：

.divUserRepCont
{
    position: absolute;

    top: 0;
    left: 105px;

    width: 195px;
    height: 25px;   
}

.divUserContCon
{
    width: auto;
    height: 100%;

    background-color: red;
}

.divUserCon
{
    width: 50px;
    height: 20px;
}

HTML：

<div class="divUserRepCont">
    <div class="divUserContCon">
        <div class="divUserCon">

        </div>
    </div>
</div>

我期待一个宽度为 50px 的红色条，但自动宽度“divUserContCon”正在填满它的父 div 的整个 195px。为什么是这样？

编辑：

divUserContCon 具有自动宽度的目的是因为：

divUserCon 的大小将动态变化，并且它本身将具有背景颜色。

divUserContCon 将是 divUserCon 的容器，它本身将具有背景颜色和填充。

因此，如果 divUserCon 为 50px 宽，背景为绿色，则 divUserContCon 将是 50px 宽（自动）+一些填充和背景色。

Answer 1

width:50px; 

需要放在 divUserContCon 中。您不能依靠 auto 只占用任何子 div 的宽度。

Answer 2

试试这个

<style type="text/css">
.divUserRepCont {
  position: absolute;
  top: 0;
  left: 105px;
  width: 195px;
  height: 25px;   
}
.divUserContCon {
    width: auto;
    height: 25px;
}
.divUserCon {
    width: 50px;
    height: 25px;
    background-color: red;
}
</style>

如果你想要你.divUserCon的，center那么只需添加margin: 0 auto;css。

Answer 3

这就是我解决它的方法：

.divUserRepCont
{
    position: absolute;

    top: 0;
    left: 105px;

    width: 195px;
    height: 25px;   

    background-color: orange;
}

.divUserContCon
{
    display: inline-block;

    height: 100%;

    padding-right: 20px;

    background-color: yellow;
}

.divUserCon
{
    display: inline-block;
    height: 20px;

    border-top: 5px solid rgb(62, 62, 62);

    background-color: red;
}

我用 display: inline-block; 替换了 width: auto