Question

我有一个父div，其填充为20px。在这个div里面有两个span标签。我希望他们的宽度是父div的50％并且适合在同一条线上。 box-sizing: border-box似乎无法解决问题。

HTML

<div>
  <span>foo</span>
  <span>bar</span>
</div>

CSS

div {border: 1px solid black; box-sizing: border-box; padding: 20px; width: 150px;}

div span {box-sizing: border-box; border: 1px solid green; display: inline-block; width: 50%;}

更新

看起来box-sizing对于这个用例来说并不是必需的，而且CBroe的答案也相应地解决了这个问题。

Answer 1

元素之间的空白是你的问题。

内联块元素的布局与普通文本非常相似，因此根据一般的HTML规则，一个元素的结束与下一个元素的开始标记之间的空格会缩小为一个单独的空格字符 - 这使得50％+一个空格字符+ 50％最终略高于100％，所以第二个元素分成一个新的“线”

有几种方法可以尝试解决这个问题 - 从消除元素标签之间的空白区域，将“字体大小”设置为“0”，这些元素之外的所有内容......其中一些更详细地讨论：{{3 }}

Answer 2

有100种方法可以做到这一点（可能是夸张，但我至少可以想到4个）。

最简单的方法是将它们block元素（为了清晰起见而添加边框）：

＆＃13;

* { box-sizing: border-box; }
span { display: block; width: 50%; float: left; padding: 12px; text-transform: uppercase; border: 4px solid #000; background: #f00;}
div { border: 2px solid #0f0; overflow:hidden;}

＆＃13;

<div>
  <span>first span</span>
  <span>second span</span>
</div>

＆＃13;

使用box-sizing属性为两个内联块元素提供50％的宽度

2 个答案: