0

我有一个填充为 20px 的父 div。在这个 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 的回答相应地解决了这个问题。

4

2 回答 2

4

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

inline-block 元素的布局与普通文本非常相似，因此根据一般 HTML 规则，一个元素的结束标记和下一个元素的开始标记之间的空白被压缩为一个空格字符——这使得 50% + 一个空格字符+ 50% 最终会比 100% 多一点，因此第二个元素会分成新的“线”</p>

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

于 2015-02-11T15:54:58.463 回答
0

有 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>

于 2015-02-11T15:35:00.540 回答