Question

我有以下代码，我试图理解为什么所有元素都不在同一行上。这是因为我添加了填充，但是在布置元素时不应该考虑填充吗？我查看了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

Answer 1

您要将四个项目中的每一个设置为25％宽度+ 10px的水平填充。这意味着将有40px的宽度将导致第四个项目换行。

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

Answer 2

使用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

Answer 3

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

注意：您可能需要使用浏览器前缀才能在某些浏览器中使用它，并且在其他浏览器中可能根本不起作用。请务必先测试一下，看它是否符合您的需求。

Answer 4

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

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

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

4 个答案: