Html 我的内联块元素没有正确排列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19366401/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
My inline-block elements are not lining up properly
提问by user1427661
All of the elements within .track-containershould line up nice and in line, each side by side, constrained by the 200px height they've been given with no weird margins or padding. Instead, you have the strangeness that occurs in the aforementioned fiddle.
里面的所有元素都.track-container应该排列整齐，每一个并排，受到 200px 高度的限制，没有奇怪的边距或填充。相反，你有前面提到的小提琴中出现的奇怪之处。
What is causing .album-artworkand .track-infoto get pushed halfway down the page, and how can I fix it? Also, I acknowledge that a table may be a better way of approaching this whole setup, but I want to figure out the problem from the code above so I can learn from this mistake.
是什么导致.album-artwork并.track-info被推到页面的一半，我该如何解决？此外，我承认表格可能是处理整个设置的更好方法，但我想从上面的代码中找出问题，以便我可以从这个错误中吸取教训。
.track-container {
padding:0;
width: 600px;
height: 200px;
border: 1px solid black;
list-style-type: none;
margin-bottom: 10px;
}
.position-data {
overflow: none;
display: inline-block;
width: 12.5%;
height: 200px;
margin: 0;
padding: 0;
border: 1px solid black;
}
.current-position, .position-movement {
height: 100px;
width: 100%;
margin: 0;
padding: 0;
border: 1px solid black;
}
.album-artwork {
display: inline-block;
height: 200px;
width: 20%;
border: 1px solid black;
}
.track-info {
display: inline-block;
padding-left: 10px;
height: 200px;
border: 1px solid black;
}<div class="track-container">
<div class="position-data">
<div class="current-position">1</div>
<div class="position-movement">2</div>
</div>
<div class="album-artwork">fdasfdsa</div>
<div class="track-info">fdafdsa</div>
</div>Here's a JSFiddle.
这是一个JSFiddle。
回答by Josh Crozier
10.8 Line height calculations: the 'line-height' and 'vertical-align' properties
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
10.8 行高计算：'line-height' 和 'vertical-align' 属性
'inline-block' 的基线是它在正常流中的最后一个 line box 的基线，除非它没有 in-flow line box 或者它的 'overflow' 属性的计算值不是 'visible'，在在这种情况下，基线是底部边距边缘。
This is a common issue involving inline-blockelements. In this case, the default value of the vertical-alignproperty is baseline. If you change the value to top, it will behave as expected.
这是涉及inline-block元素的常见问题。在这种情况下，vertical-align属性的默认值为baseline。如果将值更改为top，它将按预期运行。
.position-data {
vertical-align: top;
}
回答by Oriol
The elements inside .track-containerare inline-levelboxes in the same line box.
里面的元素.track-container是同一个line box中的inline-level box。
Therefore, their vertical alignment is specified by the vertical-alignproperty:
因此，它们的垂直对齐由以下vertical-align属性指定：
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.
此属性影响行内元素生成的框在行框内的垂直定位。
By default, its value is baseline:
默认情况下，其值为baseline：
Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.
将框的基线与父框的基线对齐。如果框没有基线，则将底部边距边缘与父项的基线对齐。
In this case, they all have baselines, which are calculated according to
在这种情况下，它们都有基线，根据计算
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
'inline-block' 的基线是它在正常流中的最后一个 line box 的基线，除非它没有 in-flow line box 或者它的 'overflow' 属性的计算值不是 'visible'，在在这种情况下，基线是底部边距边缘。
The following image clarifies what's happening (the red line is the baseline):
下图阐明了正在发生的事情（红线是基线）：
Therefore, you can
因此，您可以
Change the vertical alignment of the elements, e.g. to
top,middleorbottom.track-container > * { vertical-align: middle; }.track-container { padding: 0; width: 600px; height: 200px; border: 1px solid black; list-style-type: none; margin-bottom: 10px; } .position-data { overflow: none; display: inline-block; width: 12.5%; height: 200px; margin: 0; padding: 0; border: 1px solid black; } .current-position, .position-movement { height: 100px; width: 100%; margin: 0; padding: 0; border: 1px solid black; } .album-artwork { display: inline-block; height: 200px; width: 20%; border: 1px solid black; } .track-info { display: inline-block; padding-left: 10px; height: 200px; border: 1px solid black; } .track-container > * { vertical-align: middle; }<div class="track-container"> <div class="position-data"> <div class="current-position">1</div> <div class="position-movement">2</div> </div> <div class="album-artwork">fdasfdsa</div> <div class="track-info">fdafdsa</div> </div>Set the
overflowof the elements to something different thanvisible, e.g.hiddenorauto, so that their baseline will be their bottom margin edge..track-container > * { overflow: hidden; }.track-container { padding: 0; width: 600px; height: 200px; border: 1px solid black; list-style-type: none; margin-bottom: 10px; } .position-data { overflow: none; display: inline-block; width: 12.5%; height: 200px; margin: 0; padding: 0; border: 1px solid black; } .current-position, .position-movement { height: 100px; width: 100%; margin: 0; padding: 0; border: 1px solid black; } .album-artwork { display: inline-block; height: 200px; width: 20%; border: 1px solid black; } .track-info { display: inline-block; padding-left: 10px; height: 200px; border: 1px solid black; } .track-container > * { overflow: hidden; }<div class="track-container"> <div class="position-data"> <div class="current-position">1</div> <div class="position-movement">2</div> </div> <div class="album-artwork">fdasfdsa</div> <div class="track-info">fdafdsa</div> </div>Make sure the elements have no in-flow line box, so that their baseline will be their bottom margin edge. That is, the contents should be out of flow:
An element is called out of flowif it is floated, absolutely positioned, or is the root element. An element is called in-flowif it is not out-of-flow.
So for example, you can place the contents of the elements in a wrapper, and style it with
float: left:.track-container > * > .wrapper { float: left; }.track-container { padding: 0; width: 600px; height: 200px; border: 1px solid black; list-style-type: none; margin-bottom: 10px; } .position-data { overflow: none; display: inline-block; width: 12.5%; height: 200px; margin: 0; padding: 0; border: 1px solid black; } .current-position, .position-movement { height: 100px; width: 100%; margin: 0; padding: 0; border: 1px solid black; } .album-artwork { display: inline-block; height: 200px; width: 20%; border: 1px solid black; } .track-info { display: inline-block; padding-left: 10px; height: 200px; border: 1px solid black; } .track-container > * > .wrapper { float: left; }<div class="track-container"> <div class="position-data"> <div class="current-position wrapper">1</div> <div class="position-movement wrapper">2</div> </div> <div class="album-artwork"> <span class="wrapper">fdasfdsa</span> </div> <div class="track-info"> <span class="wrapper">fdafdsa</span> </div> </div>
更改元素的垂直对齐方式，例如更改为
top，middle或bottom.track-container > * { vertical-align: middle; }.track-container { padding: 0; width: 600px; height: 200px; border: 1px solid black; list-style-type: none; margin-bottom: 10px; } .position-data { overflow: none; display: inline-block; width: 12.5%; height: 200px; margin: 0; padding: 0; border: 1px solid black; } .current-position, .position-movement { height: 100px; width: 100%; margin: 0; padding: 0; border: 1px solid black; } .album-artwork { display: inline-block; height: 200px; width: 20%; border: 1px solid black; } .track-info { display: inline-block; padding-left: 10px; height: 200px; border: 1px solid black; } .track-container > * { vertical-align: middle; }<div class="track-container"> <div class="position-data"> <div class="current-position">1</div> <div class="position-movement">2</div> </div> <div class="album-artwork">fdasfdsa</div> <div class="track-info">fdafdsa</div> </div>将
overflow元素的设置为不同于 的东西visible，例如hidden或auto，以便它们的基线将是它们的底部边距边缘。.track-container > * { overflow: hidden; }.track-container { padding: 0; width: 600px; height: 200px; border: 1px solid black; list-style-type: none; margin-bottom: 10px; } .position-data { overflow: none; display: inline-block; width: 12.5%; height: 200px; margin: 0; padding: 0; border: 1px solid black; } .current-position, .position-movement { height: 100px; width: 100%; margin: 0; padding: 0; border: 1px solid black; } .album-artwork { display: inline-block; height: 200px; width: 20%; border: 1px solid black; } .track-info { display: inline-block; padding-left: 10px; height: 200px; border: 1px solid black; } .track-container > * { overflow: hidden; }<div class="track-container"> <div class="position-data"> <div class="current-position">1</div> <div class="position-movement">2</div> </div> <div class="album-artwork">fdasfdsa</div> <div class="track-info">fdafdsa</div> </div>确保元素没有流入线框，这样它们的基线将是它们的底部边距边缘。也就是说，内容应该是流出的：
如果元素是浮动的、绝对定位的或者是根元素，则该元素被称为流外元素。一个元素被称为在流如果不是乱流。
因此，例如，您可以将元素的内容放在包装器中，并使用以下样式对其进行设置
float: left：.track-container > * > .wrapper { float: left; }.track-container { padding: 0; width: 600px; height: 200px; border: 1px solid black; list-style-type: none; margin-bottom: 10px; } .position-data { overflow: none; display: inline-block; width: 12.5%; height: 200px; margin: 0; padding: 0; border: 1px solid black; } .current-position, .position-movement { height: 100px; width: 100%; margin: 0; padding: 0; border: 1px solid black; } .album-artwork { display: inline-block; height: 200px; width: 20%; border: 1px solid black; } .track-info { display: inline-block; padding-left: 10px; height: 200px; border: 1px solid black; } .track-container > * > .wrapper { float: left; }<div class="track-container"> <div class="position-data"> <div class="current-position wrapper">1</div> <div class="position-movement wrapper">2</div> </div> <div class="album-artwork"> <span class="wrapper">fdasfdsa</span> </div> <div class="track-info"> <span class="wrapper">fdafdsa</span> </div> </div>
回答by j08691
You need to add vertical-align:top to those two elements:
您需要将 vertical-align:top 添加到这两个元素中：
.album-artwork, .track-info {
vertical-align:top;
}
The default vertical alignment is baseline, but you are looking for top instead.
默认的垂直对齐方式是基线，但您正在寻找顶部。
回答by Szymon
Or you could set float:left;to 3 elements.
或者您可以设置float:left;为 3 个元素。
回答by Roralee
Make sure the line-height ratio on all the elements you're trying to align is the same also. If you're using a mix of DIV, P, H1-5, DT, DD, INPUT, BUTTON tags this will also cause irregularities in vertical alignment depending on what you've already defined elsewhere.
确保您尝试对齐的所有元素的行高比也相同。如果您混合使用 DIV、P、H1-5、DT、DD、INPUT、BUTTON 标签，这也会导致垂直对齐不规则，具体取决于您在别处定义的内容。
