div 宽度被忽略

Question

我正在尝试以编程方式在某些 div 内添加一系列按钮。

这是代码：

为什么

width: 110px

被忽略了？

Answer 1

按钮的宽度为 110px，但放置在宽度仅为 8.3333% 的 div 中。这来自 .s1 类。删除该类会根据需要显示宽度为 110px 的每个按钮。

.row .col.s1 {
    /* width: 8.3333333333%; */
    margin-left: auto;
    left: auto;
    right: auto;
}

Answer 2

包含的样式表materialize.min.css有一个类.col.s1 宽度为 8.3333...%。您需要在 css 中覆盖它

div.col.x {
    width: 110px !important;
}

我通常不喜欢使用 !important ，除非必要，但如果没有更多代码可供查看，这可以做到。

Answer 3

这是关于 div 宽度问题的 Google 结果的顶部附近，所以我将把它放在这里。

重要的是要记住 div 的子级并不总是遵循容器大小。

例如，如果你做类似的事情...

<div style="width: 50px;">
<span style="display: inline-block; width:50px; background-color: blue">a</span>
<span style="display:inline-block; width:100px; background-color: red">b</span>

您会清楚地看到第二个跨度的宽度仍然为 100px，超出了 50px div。

图像具有“内置”宽度，因此如果您不以某种方式覆盖它，它们很容易做同样的事情。

如果你有类似的东西

<div style="width: 50px;">
    <img src = "images/wideboi.png"/>
</div>

...并且 Wideboi.png 的宽度为 1000px，那么它将显示为 1000px，尽管您尝试将其放入的 div 很小。

对于图像，您可以通过将宽度设置为容器大小的某个百分比来控制。

<div style="width: 50px;">
    <img src = "images/wideboi.png" style = "width:100%"/>
</div>

然后你的图像会缩放到 div 的宽度，而不是让它看起来好像你的 div 忽略了它的宽度值。

在这种情况下，如果您更改图像的宽度而不对高度执行任何操作，它将缩放高度以保持其原始外观。