使用 box-sizing 属性给两个内联块元素 50% 的宽度

Question

我有一个父级 div，其内边距为 20 像素。在这个 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

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

最简单的方法是使它们成为 block 个元素（为清楚起见添加了边框）：

* { 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;}

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

Answer 2

元素之间的白色space是你的问题。

内联块元素的布局与普通文本非常相似，因此一个元素的结束标记和下一个元素的开始标记之间的白色 space 被压缩为一个 space 字符，根据一般 HTML 规则——这使得 50% + 一个 space 字符 + 50% 最终略高于 100%，因此第二个元素进入一个新的“行”

有几种方法可以尝试解决这个问题——从消除元素标签之间的白色 space，将这些元素“外部”的所有内容的字体大小设置为 0……其中一些在更多内容中进行了讨论详情在这里：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

使用 box-sizing 属性给两个内联块元素 50% 的宽度

Giving two inline-block elements a 50% width using the box-sizing property

html

css

border-box

使用 box-sizing 属性 给两个内联块元素 50% 的宽度

Giving two inline-block elements a 50% width using the box-sizing property

html

css

border-box

使用 box-sizing 属性给两个内联块元素 50% 的宽度