我的内联块元素未正确排列
内的所有元素.track- container应并排且整齐并排，并受到200px高度的限制，并且没有奇怪的边距或填充。相反，您会遇到上述小提琴中出现的陌生感。
是什么原因造成.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>
问题答案：
10.8线高的计算：“线高”和“垂直对齐”属性
“ inline-block”的基线是正常流中其最后一个线框的基线，除非它没有流入流线框，或者如果其“overflow”属性的计算值不是“visible”，则在这种情况下，基线是下边距。
这是涉及inline-block元素的常见问题。在这种情况下，该vertical-align属性的默认值为baseline。如果将值更改为top，它将按预期运行。
.position-data {
vertical-align: top;
}
-
问题内容： 其他一些问题已经解决了如何最好地应用以使内联块元素均匀分布……例如，如何真正地证明 HTML + CSS中的水平菜单？ 但是，浏览器为“清除”行内块元素行的100％宽度元素提供了自己的行。我不知道如何在不使用父元素的情况下摆脱空的垂直空间。 我正在使用的解决方案要求对子元素应用新的解决方案，但是之前设置的所有内容都会丢失。有谁知道更好的解决方案？我想避免使用表，以便在必要时可以包装元素
-
问题内容： 举个例子 是在HTML5有效吗？ 问题答案： 是的，您编写的内容在HTML5中有效，但并非所有内联元素，我认为这只是适用于.. 参考：HTML5中的“块级”链接 提示：如果使用此设置，则to 或可能会有意外的视觉样式结果 更新： 对于“默认样式可能会导致混淆”的其他“内联代码块”组合，则“不允许”使用-说明在这里 ### 默认样式可能导致混淆的情况 某些元素具有默认样式或行为，这些默认
-
问题内容： 遇到了一个奇怪的CSS问题。有人可以解释为什么包含内容的框未垂直对齐吗？ 如果您将文本放在class的范围内-它将正确对齐。 问题答案： 默认值是其 将框的基线与父框的基线对齐 注意：您可以通过添加到选择器中来查看此默认值。由于是默认设置，因此对齐方式保持不变。 您需要对其进行更改以使块在顶部对齐，例如： 基准定义为 大多数字母“坐着”且下级延伸到其下的线 解决 为什么 添加文本似乎可
-
如果我在锚元素中放置div元素，它会使我的超文本标记语言无效。 不在内联元素中放置块级元素的原因是什么？
-
我的取消排队方法目前也不会删除我想要的项，而是从集合中删除最后一个元素。例如 如果我添加元素：1，2，3我的toString方法将按预期返回1，2，3。 然后，当我使用我的驱动程序调用 dequeue 时，它应该取消第 0 个元素的排队，在本例中为 1。 尽管该方法表示“已从队列中删除元素1”，提示＜code＞T result 然后，当我再次调用enqueue方法时，在同一个队列上，如果我将字符串
-
问题内容： 鉴于此HTML和CSS： 结果，SPAN元素之间将有4像素宽的空间。 我知道为什么会发生这种情况，而且我也知道可以通过删除HTML源代码中SPAN元素之间的空白来摆脱该空间，如下所示： 但是，我希望找到一种不需要篡改HTML源代码的CSS解决方案。 我知道如何使用JavaScript解决此问题-通过从容器元素（该段）中删除文本节点，如下所示： 但是，仅靠CSS就能解决这个问题吗？ 问题