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

因此，我遇到了以前没有遇到过的情况，但它似乎影响所有浏览器，所以我猜想正确的行为我只是不知道为什么。嵌套内联块元素的填充百分比

我有一个元素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%; 
}

来源

2014-11-14 Chris

更改您的物品到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更新以显示我的意见，以及上面的选项的解决方案进行讨论。

来源

2014-11-14 17:59:05

我在说什么也没做的问题我问题：'inline-block'对'.wrapper'元素很重要（它是更大设计的一部分），所以这不是我害怕的选择。 – Chris 2014-11-17 08:58:34

@Chris我认为这不够好？（刚刚编辑） – 2014-11-17 14:40:45

我假设你的问题来了，因为你没有设置你的包装的宽度。所以你可以说为包装器设置了100px的宽度（默认情况下）。然后你添加10％填充两次（到链接），然后将内容压入120px，因此超出了包装的背景颜色。 – 2014-11-17 14:50:53

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

加入这将解决

你固定子与技巧，但对于家长，您使用以下方法解决问题

.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 **/ 
}

来源

2014-11-14 18:06:10

'font-size：0'只是我使用的评论方法的替代方案 - 最终结果是一样的。 'white-space：nowrap'类的作品，但如果你将背景颜色放在'wrapper'上，而不是项目，那么它不能完全覆盖内容：http://codepen.io/mrchris/pen/ QwWYoB。 – Chris 2014-11-17 09:24:17

是的第一我也认为同样的事情，但是当我尝试重新加载，并在不同的浏览器它打破 – 2014-11-17 09:26:37

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

回答

相关问题