html - 行高元素内的行内 block 元素

Question

当我需要构建一个只有一行的菜单时(主要是一行向左浮动，一行向右浮动)，我总是使用为父元素分配一个高度和一个行高的方法来垂直居中所有内容，像这样:

<div style="height:50px;line-height:50px">
<ul style="float:left">
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul style="float:right">
    <li></li>
    <li></li>
</ul>
<div>

我一直对这种方法很满意，直到我需要在 line-height 元素中插入一个内联 block 元素(因为我需要定义一些固定宽度的元素)。在这种情况下，内联 block 元素的行为有所不同，因为它占用了 line-height 元素的所有高度，但我需要它的正常行为允许我使用具有内联元素相同属性的宽度/高度属性。

有什么解决办法吗？我还想知道这种单行元素垂直对齐方法是否有效，或者由于商品/兼容性原因我需要更改它。

div {
  overflow: hidden;
}

ul {
  list-style-type: none;
  padding: 0; margin: 0;
}

li {
  display: inline-block;
}

span {
  display: inline-block;
  background-color: red;
  width: 40px;
}

<div style="background-color:green;height:50px;line-height:50px">
	<ul style="float:left">
		<li>#1</li>
		<li>#2</li>
		<li>#3</li>
	</ul>
	<ul style="float:right">
		<li>#4</li>
    <li><span>#5</span></li>
	</ul>
</div>
<br /><br />
<div style="background-color: green;height:50px;">
	<ul style="float:left">
		<li>#1</li>
		<li>#2</li>
		<li>#3</li>
	</ul>
	<ul style="float:right">
		<li>#4</li>
    <li><span>#5</span></li>
	</ul>
</div>

Answer 1

然后，您需要为该 span 元素分配高度，它与容器的高度相同。

<li><span style="height: 50px;">#5</span></li>

但是，使用 flexbox 会使事情变得容易得多。示例:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: green;
}

.container ul {
  padding: 0;
  margin: 0;
  display: flex;
}

.container li {
  list-style: none;
}

.container span {
  background-color: red;
}

<div class="container">
  <ul>
    <li>#1</li>
    <li>#2</li>
    <li>#3</li>
  </ul>
  <ul>
    <li>#4</li>
    <li><span>#5</span></li>
  </ul>
</div>