两个行内块元素的垂直对齐未按预期工作 [英] Vertical alignment for two inline-block elements not working as expected
问题描述
在下面的代码中，为什么我需要将 vertical-align:top 设置为两个元素以缩小它们之间的差距?如果间隙仅出现在第一个元素上，我不能将其设置为 vertical-align: top 以关闭间隙吗?
In the code below, why do I need to set vertical-align: top to both elements to close the gap between them? If the gap occurs on the first element only, can't I just set that to vertical-align: top to close the gap?
如果我仅将 vertical-align 属性分配给 .test 会发生以下情况:
Here is what occurred if I assign vertical-align property to only .test :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
width: 100vw;
height: 100vh;
margin: 0;
background-color: black;
}
.test {
vertical-align: top;
display: inline-block;
width: 10%;
height: 100px;
background-color: lightblue;
}
hr{
display: inline-block;
width: 100%;
border: thick solid lightgreen;
margin: 0;
}
</style>
</head>
<body>
<div class = "test"></div><hr/>
</body>
</html>这就是当我为 both 元素指定 vertical-align 时发生的情况:
This is what happened when I assign vertical-align to both elements:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
width: 100vw;
height: 100vh;
margin: 0;
background-color: black;
}
.test {
vertical-align: top;
display: inline-block;
width: 10%;
height: 100px;
background-color: lightblue;
}
hr{
display: inline-block;
width: 100%;
border: thick solid lightgreen;
margin: 0;
vertical-align: top;
}
</style>
</head>
<body>
<div class = "test"></div><hr/>
</body>
</html>推荐答案
任何时候处理内联、内联块或表格元素时，您都需要担心垂直对齐.正如 Arbin Shrestha 所说，默认值为 baseline.我不明白的是为什么您无论如何都要对这两个值使用 inline-block .hr 是全宽，因此更改 display 属性似乎没有必要.
Anytime you are working with inline, inline-block, or table elements you will need to worry about vertical-align. As Arbin Shrestha said, the default value is baseline. What I don't understand is why you are using inline-block on both of these values anyway. The hr is full width, so changing the display property seems unnecessary.
如果您要在顶行对齐多个 .test 蓝色块，请将它们全部设置为 display: inline-block;Vertical-align: top;，但您不需要更改 hr 的 display 值.如果您将 hr 标记保留为其默认的 display: block; 值，那么它应该对齐而不会与 vertical-align 和 混淆>宽度.我希望这就是你要找的.看这里:
If you are going to align multiple of those .test blue blocks in the top line, then set them all as display: inline-block; vertical-align: top;, but you shouldn't need to change the display value for the hr. If you leave the hr tag with its default display: block; value, then it should line up without messing with vertical-align and width. I hope that's what you're looking for. See here:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
width: 100vw;
height: 100vh;
margin: 0;
background-color: black;
}
.test {
vertical-align: top;
display: inline-block;
width: 10%;
height: 100px;
background-color: lightblue;
}
hr{
border: thick solid lightgreen;
background-color: lightgreen;
margin: 0;
}
</style>
</head>
<body>
<div class = "test"></div>
<div class = "test"></div>
<div class = "test"></div>
<hr/>
</body>
</html>这篇关于两个行内块元素的垂直对齐未按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
