当它在另一个div中时，如何将div设置为最小宽度？

Question

我有两个DIV。

Div A为100％宽度
Div B位于Div A内部，没有宽度设置，里面有几个文字

我尝试为Div B设置底部边框，以便文本显示为下划线。然而，似乎Div B扩展了Div A的整个宽度。有什么方法可以让Div B只是文本的宽度。

希望我的问题很清楚。

谢谢，

Answer 1

Div是块级元素，这意味着它们总是扩展到容器宽度的100％。

如果您只想在文本周围放置边框，请将其包裹在内联元素（如跨度）中，并将边框应用到该范围。

或者，在有问题的div上使用display:inline，但为此目的使用div确实没有意义

Answer 2

将float: left添加到Div B.然后，div的宽度将由内容的宽度决定;换句话说，div将“收缩包装”到其内容。

要正确制作Div A contain Div B，您还应将overflow: hidden添加到Div A。

另一种选择是在Div B上使用display: inline-block。但在这种情况下，float更容易，因为display: inline-block需要一些帮助才能在IE7中使用。

请参阅： http://jsfiddle.net/Sfg8Y/

Answer 3

<div class="mydiv">content</div>

div.mydiv
{
     display: inline-block;
     padding-bottom: 1px;
     border-bottom: 1px solid #000;
}

Answer 4

在内部div中使用display: inline-block。

#A { 
  background: #abc;
}

#B {
   background: #cba;
   display: inline-block;
}

<div id="A">
  <div id="B">
    a few words of text inside
  </div>
</div>