使用内联块并向节点添加填充的正确输出是什么？

问题描述：

我有下面的代码，我想了解为什么所有的元素都没有放在同一行上。这是因为我添加了填充，但是在布置元素时不应该考虑填充？我检查了IE，Firefox和Chrome。他们都在下一行列出最后一个元素。使用内联块并向节点添加填充的正确输出是什么？

有人可以解释为什么，以及如何获得同一行上的所有元素，并保持填充他们的填充？

由于在新的一行

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style> 
.body{PADDING:0PX;MARGIN:0PX} 
.bar{WIDTH:100%;HEIGHT:20PX;BACKGROUND-COLOR:#FFFFFF;} 
.item{WIDTH:25%;HEIGHT:20PX;DISPLAY:INLINE-BLOCK;COLOR:#000000;PADDING:5PX;} 
</style> 
</head> 

<body class="body"> 
<div id="menubar" class="bar"> 
    <div class="item">B1</div> 
    <div class="item">B2</div> 

    <div class="item">B3</div> 
    <div class="item">B4</div> 
</div> 
</body> 
</html>

B4显示。

我想输出是：

B1 B2 B3 B4

我得到的输出是：

B1 B2 B3 
B4

这很痛苦，请写下您的CSS小写。 '{填充：0像素; margin：0px}'是接受和预期的编写CSS的方式。 – meagar 2012-01-16 21:37:24

答

对于inline-block布局，除了您添加的任何填充之外，元素还受空白和垂直布局的影响。使用这种布局形式时，最好始终使用vertical-align: top;。这给你一个始终如一的工作起点。

inline-block的空白问题是，HTML中元素之间的任何空格会像HTML中的文本一样被对待，并会凝聚到单个空间中。所以，除了你设定的填充或边距之外，你还有这个空间来处理。为了摆脱它，你可以把你的元素聚集在一起，或者注释掉空白。

因此，在你的情况下，除了25％，它还增加了空格和填充。最简单的解决方法是只将填充更改为顶部和底部。由于您的设计是柔性布局，所以您的左右衬垫采取了另一种方式：通过它的拉伸。如果文本在左边的边界上出现问题，可以使用text-indent: 5px;代替padding-left: 5px;。它不影响布局。

演示：http://jsfiddle.net/ThinkingStiff/xAEhY/

变化：

.item{WIDTH:25%;HEIGHT:20PX;DISPLAY:INLINE-BLOCK;COLOR:#000000;PADDING:5PX;}

要：

.item { 
    color: #000000; 
    display: inline-block; 
    height: 20px; 
    padding: 5px 0 5px 0; 
    text-indent: 5px; 
    width: 25%; 
}

下面是说明了inline-block布局和如何处理他们的问题的演示。

演示：http://jsfiddle.net/ThinkingStiff/axjba/

HTML：

<div id="container"> 
    <div class="child">one</div> 
    <div class="child">two</div> 
    <img class="child" /> 
</div> 

<div id="container-align"> 
    <div class="child-align">one</div> 
    <div class="child-align">two</div> 
    <img class="child-align" /> 
</div> 

<div id="container-align-whitespace"> 
     <div class="child-align">one</div><!-- 
    --><div class="child-align">two</div><!-- 
    --><img class="child-align" /> 
</div>

CSS：

.child { 
    border: 1px solid red; 
    display: inline-block; 
    height: 50px; 
    width: 50px; 
} 

.child-align { 
    border: 1px solid red; 
    display: inline-block; 
    height: 50px; 
    vertical-align: top; 
    width: 50px; 
} 

#container, #container-align, #container-align-whitespace { 
    border: 1px solid black; 
    height: 100px; 
    width: 300px; 
}

输出：

enter image description here

答

你四个项目的设置，以25％的宽度水平填补+ 10px的。这意味着将会有40px的宽度将导致第四个项目打包。

如果您想在应用宽度的相同元素上使用填充，则需要使用百分比，例如width: 23%; padding: 5px 1%;。或者，您可以将填充应用于内部元素，以便项目上的唯一尺寸是宽度。

不要忘记'display：inline-block'也会在每个元素的右边呈现4px :)。 +1。 – 2012-01-16 21:40:27

@AndresIlich，如果我没有弄错，在'inline-block'元素右下方添加的空间量是基于'font-size'属性的，并且不是一个设置的大小（'4px' ）。 – 0b10011 2012-01-16 21:45:08

@bfrohs是的。它是单个空白字符，由当前字体大小定义的宽度。 – ThinkingStiff 2012-01-16 21:49:08

答

在CSS中的width和height适用于content box（在填充/边框/边距内）。因此，当您设置width和padding时，元素的总宽度计算为width + padding-left + padding-right。为了克服这个问题，您可以相应地调整width，或者将CSS3的box-sizing属性设置为border-box。这使得宽度包括padding和border，因此不受更改padding或border值的影响。然而，margin属性仍然会影响总宽度。

针对这个问题，添加到您的CSS：

.item { 
box-sizing:border-box; 
}

欲了解更多信息，请参阅http://www.w3.org/TR/css3-ui/#box-sizing

注：您可能需要浏览器前缀得到这个在某些浏览器工作，它可能根本不适用于其他人。请务必首先进行测试，看看它是否符合您的需求。

答

在Bs周围添加另一个块元素。如果是菜单，请将锚标记转换为：

#menubar a{display: block; padding: 5px}

使用内联块并向节点添加填充的正确输出是什么？

相关推荐