当我应用“float: right”时，附近文本的垂直对齐方式不再与其旁边的元素正确对齐(只有水平对齐方式继续有效)。我对网络开发比较陌生，所以我知道这可能是一个简单的问题。 This is what it currently looks like.
HTML:
<body>
<ul>
<li><span>Some Text Some Text Some Text</span><span>X</span></li>
<li><span>Some Text Some Text Some Text</span><span>X</span></li>
<li><span>Some Text Some Text Some Text</span><span>X</span></li>
<li><span>Some Text Some Text Some Text</span><span>X</span></li>
</ul>
CSS:
* {
font-size: 25px;
text-align: center;
}
ul {
list-style-type: none;
}
li {
background-color: green;
color: white;
margin: 0;
height: auto;
overflow: hidden;
}
li span:nth-child(2) {
display: inline-block;
color: white;
float: right;
background-color: black;
padding: 15px;
}
正如您从上面的代码中看到的那样，文本的对齐方式并未垂直居中，元素位于右侧(黑色“X”)。如果有人可以帮助我解决此问题并解释为什么会导致此问题以供将来引用，我将不胜感激。谢谢:)
最佳答案
您的 X 有填充，而您的文本没有。您可以从 X 提供相同的 padding 并将 display: inline-block; 添加到文本中。
* {
font-size: 25px;
text-align: center;
}
ul {
list-style-type: none;
}
li {
background-color: green;
color: white;
margin: 0;
height: auto;
overflow: hidden;
}
li span:first-child {
display: inline-block;
padding: 15px;
}
li span:nth-child(2) {
display: inline-block;
color: white;
float: right;
background-color: black;
padding: 15px;
}<ul>
<li><span>Some Text Some Text Some Text</span><span>X</span></li>
<li><span>Some Text Some Text Some Text</span><span>X</span></li>
<li><span>Some Text Some Text Some Text</span><span>X</span></li>
<li><span>Some Text Some Text Some Text</span><span>X</span></li>
</ul>关于html - 为什么在使用 'float: right' 时垂直对齐停止工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56548801/