如何将div放在另一个div内时变成最小宽度？

我有两个DIV。如何将div放在另一个div内时变成最小宽度？

股利A为100％的宽度
股利B是股利A的内部，它不具有宽度设置并具有在其内部文本几句

我试图设置在底边框为股利乙所以文字出现下划线。但是，Div B似乎扩展了Div A的全部宽度。有什么办法可以让Div B只是文本的宽度。

希望我的问题清楚。

谢谢，

来源

2011-04-29 Markiko

你不能用一个'span'而不是'div'任何理由？ – 2011-04-29 02:47:27

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

如果您想在文本周围放置边框，请将其包装在内联元素中，例如跨度，然后将边框应用于该跨度。

另外，对有问题的DIV使用display:inline，但没什么用一个div用于该目的

来源

2011-04-29 02:45:47 brad

很好的答案。如果你需要填充等，但你需要使用display：inline-block; – Marty 2011-04-29 02:48:38

是真实的，但是在这个问题中没有提到这个要求，所以为了简洁和简单起见我没有提及它。 – brad 2011-04-29 02:54:28

大声笑，我整天都这样做了，因为不够成熟而不断磨砺：/ – Marty 2011-04-29 02:56:50

没有一点添加float: left到事业部B的div的宽度将随后由内容的宽度确定内;或换句话说，div将“收缩包装”到其内容。

为了事业部一个contain事业部B正常，你还应该添加overflow: hidden到事业部A.

另一种选择是在股利B.但是，在这种情况下使用display: inline-block，float比较容易，因为display: inline-block需要一些帮助在IE7中工作。

参见：http://jsfiddle.net/Sfg8Y/

来源

2011-04-29 02:45:56 thirtydot

'浮动'看起来有点像跳过铁环不？ 'inline'元素完全不需要额外的标记或css声明。 – brad 2011-04-29 02:51:34

@brad：'inline'元素不允许添加'margin-top' /'margin-bottom'（等等）。为了解决这个问题，你需要使用'display：inline-block'。我的答案涵盖了为什么使用浮点数比使用'display：inline-block'更容易（对于IE7兼容性）。即使它只使用'display：inline-block; *显示：内联;缩放：1'使其在IE7中工作。当然，他也可以用''这个符号，这（根据你的答案）是最好的解决方案。 – thirtydot 2011-04-29 02:56:02

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

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

来源

2011-04-29 02:49:15 Marty

如何将div放在另一个div内时变成最小宽度？

回答

相关问题