Question

我有：

<connectionType value="System.Data.EntityClient.SqlConnection, System.Data, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />

CSS：

<connectionType value="System.Data.SqlClient.SqlConnection, System.Data, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />

我只想让<div class="div1"> <ul> <li><input type="button" value="val1"></li> <li ><input type="button" value="val2"></li> <li ><input type="button" value="val2"></li> <li ><input type="button" value="val2"></li> <li ><input type="button" value="val2"></li> <li ><input type="button" value="val2"></li> <li ><input type="button" value="val2"></li> <li ><input type="button" value="val2"></li> </ul> </div>的宽度根据.div1{ position:absolute; height:30px; width:auto; top:50%; margin-top:-15px; left:50%; transform:translate(-50%); border:1px solid #f7f7f7; display: inline-block; //inline } .ul li{ margin-right:5px; box-shadow: 2px 3px 3px #666666; border-radius: 2px; }尺寸的数量进行扩展（仅供参考：李金额是随机的）。

如果我设置div div1，那么li会溢出div容器。如果我试图设置div width: 100px // or something仍然相同。

另外我注意到我的浏览器检查模式有一件事，如果我删除左：50％然后它工作正常，但框的位置左边，我需要保持元素居中

非常感谢所有回复：）

Answer 1

我不知道我是否理解了这个问题，但是如果我将高度设置为auto，而不是30px，那么当我至少测试它时没有溢出

.div1{
    position:absolute;
    height:auto; // CHANGED THIS LINE
    width:auto;
    top:50%;
    margin-top:-15px;
    left:50%;
    transform:translate(-50%);
    border:1px solid #f7f7f7;
    display: inline-block; //inline
}

Answer 2

只需删除div1的高度和宽度即可。它们将具有默认值。并且不要在css规则中的ul选择器之前放置点.。 ul是元素，而不是类。

.div1{
    position:absolute;
    top:50%;
    margin-top:-15px;
    left:50%;
    transform:translate(-50%);
    border: 1px solid #f70000;
    display: inline-block; //inline
}
ul li{
    margin-right:5px;
    box-shadow: 2px 3px 3px #666666;
    border-radius: 2px;
}

<div class="div1">
    <ul>
        <li><input type="button" value="val1"></li>
        <li ><input type="button" value="val2"></li>
        <li ><input type="button" value="val2"></li>
        <li ><input type="button" value="val2"></li>
        <li ><input type="button" value="val2"></li>
        <li ><input type="button" value="val2"></li>
        <li ><input type="button" value="val2"></li>
        <li ><input type="button" value="val2"></li>
    </ul>
</div>

Answer 3

1）您是否尝试过不设置width属性？或者，如果您至少需要min-width的任何大小，则可以指定div。

注意：inline-block应采用其内容的宽度

2）我不确定，但是你的li实际上并没有使用宽度，如果你添加更多的宽度，他们显然应该扩展height的{{1}} ，因此您应该使用div属性或不指定任何min-height。

height

Answer 4

不知道为什么但是我只是发现问题出现在translate()中，所以为了让我的div容器居中并将盒子的宽度扩展为auto。

一种简单而干净的方式：

.div1{
    margin: 30px auto;
    border: 1px solid #f7f7f7;
    display: table;
}

正如它所说的那样：一鞠躬两次杀戮（干净又快速）

将div宽度设置为ul列表大小

4 个答案: