CSS 类自动将宽度调整为 100%，我不希望它这样做

Question

为标题中的奇怪措辞道歉。

我在设计网站时遇到问题。我正在使用 WordPress，但我认为这不是问题所在。

问题是，我有一个“模块”类，它应该包装到它的内容中。然而，它不是环绕，而是默认拉伸(stretch)到其父级宽度的 100%。当我手动输入适当的宽度时，右边距仍然延伸到其容器的右侧边缘。当我手动调整边距大小时，没有任何变化。

这里是模块类，只是因为:

.module
{
margin:0px;
padding:5px;
background:#356;
border:#38a solid 1px;
}

这很简单。但是，我希望将其包装到其内容中。相反，它会自动调整自身大小以拉伸(stretch)到其父级的 100%。

我已经搜索了我的样式表和 Chrome 的元素检查器，但我终究无法弄清楚发生了什么。

Answer 1

您可能将该类添加到 block-level元素，如 div 或段落。默认情况下， block 级元素具有 display: block，因此它们会拉伸(stretch)到宽度或其父元素。

您可以使用 display: inline-block; 来更改该行为:

.module {
    display: inline-block;
    margin: 0;
    padding: 5px;
    background: #356;
    border: 1px solid #38a;
}