两个行内块元素的垂直对齐未按预期工作
[英]Vertical alignment for two inline-block elements not working as expected
问题描述
In the code below, why do I need to set vertical-align: top to both elements to close the gap between them?
在下面的代码中，为什么我需要为两个元素设置vertical-align: top以缩小它们之间的差距？ 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: top来关闭间隙吗？
Here is what occurred if I assign vertical-align property to only .test :如果我仅将 vertical-align 属性分配给.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>
This is what happened when I assign vertical-align to both elements:这就是当我为两个元素分配 vertical-align 时发生的情况：
<!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>
2 个解决方案
解决方案1
0 2021-06-17 14:24:27
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 .正如 Arbin Shrestha 所说，默认值是baseline 。 What I don't understand is why you are using inline-block on both of these values anyway.我不明白的是为什么您无论如何都要对这两个值使用 inline-block 。 The hr is full width, so changing the display property seems unnecessary. hr是全宽，因此更改display属性似乎没有必要。
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;如果要在顶行对齐多个.test蓝色块，请将它们全部设置为display: inline-block; vertical-align: top; display: inline-block; vertical-align: top; , but you shouldn't need to change the display value for the hr. ，但您不需要更改 hr 的display值。 If you leave the hr tag with its default display: block;如果您保留hr标签的默认display: block; value, then it should line up without messing with vertical-align and width .值，那么它应该vertical-align ，而不会与vertical-align和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>
解决方案2
-1 2020-08-26 14:19:02
That is because all inline-block and inline elements have the "vertical-align" property set to "baseline" by default .这是因为所有 inline-block 和 inline 元素都默认将“vertical-align”属性设置为“baseline”。
Look here for more details:看这里了解更多详情：
https://css-tricks.com/almanac/properties/v/vertical-align https://css-tricks.com/almanac/properties/v/vertical-align
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.