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元素内插入一个inline-block元素为止（因为我需要定义一些固定宽度的元素）。在这种情况下，inline-block元素的行为有所不同，因为它占用了line-height元素的所有高度，但是我需要它的行为正常，以允许我使用与inline元素相同的width / height属性。 / p>

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

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>

行内元素的行内块元素

1 个答案: