我的html中有3个内联块：
<div class="top">
<div class="inline color2 player1 polygon">
<div class="title">KDZaster</div>
</div>
<div class="inline color1 round polygon">
<div class="title">Grand Finals</div>
</div>
<div class="inline color2 player2 polygon">
<div class="title">DarthArma</div>
</div>
</div>
所有3个块均设置为
display: inline-block，并且它们的行高均相同。但是，中间块的字体较小。由于字体较小，因此该块本身似乎设置在其他块下方。我包括一个jsfiddle：https://jsfiddle.net/7jvtog6d/
为什么会这样呢？有简单的解决方法吗？
最佳答案
使用vertical-align:top将内联块元素垂直对齐到CSS，它将正常工作！
检查一下，让我知道您的反馈。谢谢！
.top > div.polygon {
display: inline-block;
vertical-align: top;
}
:root {
--main-color1: rgba(255, 000, 000, 0.5);
--main-color2: rgba(000, 255, 255, 0.5);
--main-color3: rgba(255, 255, 255, 0.5);
--main-height: 40px;
--main-gutter: -10px;
--main-padding: 10px;
--font-family: 'Franklin Gothic';
--font-color: #FFFFFF;
--font-large: 30px;
--font-small: 14px;
--font-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000;
--arrow-width: 15px;
--round-width: 150px;
--player-width: 200px;
--score-width: 40px;
--out-speed: 0.5s;
--in-speed: 5s;
}
body {
color: var(--font-color);
font-family: var(--font-family);
font-size: var(--font-large);
text-shadow: var(--font-shadow);
line-height: var(--main-height);
margin: 10px 0;
text-align: center;
background-color: black;
}
.slow {
transition: all var(--in-speed) ease;
}
.fast {
transition: all var(--out-speed) linear;
}
.inline {
display: inline-block;
margin: 0 -8px;
}
.color1 {
background-color: var(--main-color1);
}
.color2 {
background-color: var(--main-color2);
}
.color3 {
background-color: var(--main-color3);
}
.round {
font-size: var(--font-small);
text-transform: uppercase;
width: var(--round-width);
}
.round.polygon {
-webkit-clip-path: polygon(0 calc(var(--main-height) / 2), var(--arrow-width) 0, calc(var(--round-width) - var(--arrow-width)) 0, var(--round-width) calc(var(--main-height) / 2), calc(var(--round-width) - var(--arrow-width)) var(--main-height), var(--arrow-width) var(--main-height));
}
.player1,
.player2 {
width: var(--player-width);
}
.player1 .title {
text-align: right;
padding: 0 20px;
}
.player2 .title {
text-align: left;
padding: 0 20px;
}
.player1.polygon,
.player2.polygon {
-webkit-clip-path: polygon(var(--arrow-width) calc(var(--main-height) / 2), 0 0, var(--player-width) 0, calc(var(--player-width) - var(--arrow-width)) calc(var(--main-height) / 2), var(--player-width) var(--main-height), 0 var(--main-height));
}
.top > div.polygon {
display: inline-block;
vertical-align: bottom;
}<body>
<div class="top">
<div class="inline color2 player1 polygon">
<div class="title">KDZaster</div>
</div>
<div class="inline color1 round polygon">
<div class="title">Grand Finals</div>
</div>
<div class="inline color2 player2 polygon">
<div class="title">DarthArma</div>
</div>
</div>
</body>