css - 奇怪的css宽度问题？

Question

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

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

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

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

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

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

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

1

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

于 2012-04-11T14:13:23.070 回答

score 1 · Accepted Answer

打断文档流

默认情况下，div元素的 styledisplay属性设置为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 浮动和/或CSS 位置。

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

如果您想保持文档流，请使用span而不是div- 默认情况下，它的display属性是inlineBlowsie 建议的。

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

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

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

score 0 · Accepted Answer

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

尝试：

div {padding: 0px;}

在你的 CSS

score 0 · Accepted Answer

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