html - 如何使我的 DIV 与它所包含的文本大小相同

Question

我有这个代码:

<div id="one">
<div id="two">my text here</div>
</div>

我用 id=two 设置了 div 的样式，并在其周围放了一个框。问题是它没有包含文本，而是扩展到外部 DIV 的宽度。有没有一种方法可以在不指定宽度的情况下使它的大小与文本匹配？

Answer 1

你可以

#two {
    display: inline; /* or 'inline-block' */
}

或者:

#two {
    float: left; /* or right */
}

display: inline; 停止将 div 显示为 block 级元素，导致它折叠(需要一个更好的词)到它的大小内容。如果您使用替代方案 display: inline-block，则 div 保留其定义的 width 和 height 的能力>，这可能是您的布局所必需的。然而，值得注意的是，Internet Explorer 6 和 7 只接受 display: inline-block 那些元素是 ' naturally inline .'

float 具有相同的效果；但是使用 float 可能/将明显影响页面的布局，并且可能需要被后续元素清除。