奇怪的css宽度问题？答案

【问题标题】：Weird css width issue?奇怪的css宽度问题？
【发布时间】：2012-04-11 22:19:53
【问题描述】：

或者我已经构建网页太久没有休息或发生了一些非常奇怪的事情。

<div style="background-color:#0F0; margin:5px; height:5px;"></div>

将在父 div 的宽度上产生一个高度为 5 的长条。这通常不应该是可见的，因为我没有给 div 宽度。

我尝试了所有方法，弄乱了我的整个 CSS 布局，但似乎没有什么能摆脱它。我什至检查了我在同一个项目中仍然像这样工作的一些 div。

所以我打开了一个新项目并填写了上面的那一行，以确保没有一些样式设置搞砸了。但仍然有一个绿色条显示。

我只希望我的 div 是其中文本的大小。

再一次，我可能会看到一些东西，但这突然发生了，我真的一无所知......

【问题讨论】：

【解决方案1】：

使用display:inline，因为一个div元素会自动获取display:block

【讨论】：

【解决方案2】：

您的 div 必须在您的代码中或从您的浏览器继承 display:block。

将其更改为 display:inline 以获得您想要的结果。

【讨论】：

【解决方案3】：

打断文档流

默认情况下，div 元素的样式 display 属性设置为 block，这使得它的宽度可以填充父元素的尺寸。

您有两个选项可以将其剪辑为文本，position: absolute 或 float: left（也可以使用，取决于），如下所示：

<div style="background-color:#0F0; margin:5px; height:5px; position: absolute;"></div>

或：

<div style="background-color:#0F0; margin:5px; height:5px; float: left;"></div>

有关详细信息，请参阅CSS Floats 和/或CSS Positions。

附：请记住，绝对位置和/或浮动元素会将其从文档流中移除。

如果您想保持文档流，请使用 span 而不是 div - 它的 display 属性默认为 inline，正如 Blowsie 建议的那样。

<span style="background-color:#0F0; margin:5px; height:5px;"></span>

还有一个选项将display 属性设置为inline-block，但它的兼容性有限。有关详细信息，请参阅CSS Display 属性信息。

<div style="background-color:#0F0; margin:5px; height:5px; display: inline-block;"></div>

【讨论】：

【解决方案4】：

通常是填充问题。如果不查看代码或站点错误示例，很难诊断。

尝试：

div {padding: 0px;}

在你的 CSS 中

【讨论】：

【解决方案5】：

默认情况下，div 的宽度是自动的，这意味着它将填充整个可用内容。要获得您想要的“无宽度”，请将宽度显式设置为零。或者，使用其他答案之一...

【讨论】：