Question

所以我遇到了以前没见过的东西，但它似乎影响了所有的浏览器，所以我想正确的行为我只是不知道为什么。

我有一个wrapper元素设置为inline-block。在这个包装器中，我有三个元素也设置为inline-block。

如果我在元素上设置了固定padding-right: 10px，那么works as expected。但是，如果我将填充值设为padding-right: 10%，则为最后一个元素always breaks a line。这是为什么？

它（在一定程度上）使inline-block关闭wrapper，但在我的设计中这非常重要。

HTML：

<div class="wrapper">
    <div class="item">Link</div><!--
 --><div class="item">Link</div><!--
 --><div class="item">Link</div>
</div>

CSS：

.wrapper {
  display: inline-block;
  background: red;
}

.item {
  display: inline-block;
  padding-right: 10%;
}

Answer 1

将商品的显示更改为inline，而不是inline-block

.item {
  display: inline;
  padding-right: 10%;
}

要解决红色背景问题，您可以将颜色从背景移动到项目：

.wrapper {
  display: inline-block;
}

.item {
  display: inline;
  padding-right: 10%;
  background: red;
}

JSFiddle：http://jsfiddle.net/q7jpa4tn/

此处还有CodePen：http://codepen.io/anon/pen/MYWrXE

CodePen已更新，以显示我在评论中讨论的内容以及上面的选项解决方案。

Answer 2

演示 - http://codepen.io/anon/pen/PwoEew

添加此项将解决问题

你用黑客修复了sub但是对于父级你没有使用下面的方法会解决问题

  .wrapper {
   display: inline-block;
   font-size:0; /* for removing children whitespace */
  }

 .item {
   display: inline-block;
   padding-right: 10%; 
   font-size:15px;
   background: red;
 }

 .wrapper {
   white-space: nowrap; /** will fix the white space **/
 }

嵌套内联块元素的填充百分比

2 个答案: