html - 在事件元素上居中/对齐垂直列表

Question

这个问题是出于好奇，为了探索 CSS 的局限性并更好地了解布局的可能性。考虑以下示例:

.container {
   display: inline-block;
   width: 6rem;
   vertical-align: -4rem;
}

.item {
  width: 6rem;
  height: 2rem;
  background-color: lightblue;
  line-height: 2rem;
}

.item.active {
  color: white;
  background-color: darkblue;
}
  

The selected element: 
<div class="container">
  <div class="item a">Pineapple</div>
  <div class="item b active">Apple</div>
  <div class="item c">Tomato</div>
  <div class="item d">Banana</div>
</div>

是否可以使用纯 CSS 始终保留 active元素与描述文本对齐而不对元素数量进行硬编码？在示例中，您可以看到第二个元素处于事件状态，并且描述文本与其对齐。

我的想法:

有没有办法只在事件元素对框的高度做出贡献之前制作元素？然后vertical-align: bottom应该做我想做的。但是，我还没有找到在保持物品堆叠完好的同时做到这一点的方法。

float 并不总是对容器的高度有贡献，但 inline-block确保包含所有浮点数。也许有一种方法可以通过 float 和更多级别的容器来实现这一目标？

Answer 1

这是一个简单的想法，您可以在其中保留代码并依赖默认的基线对齐方式。诀窍是让所有元素 float 但不是事件元素，这个将定义其父元素的基线。

它也是可扩展的，适用于任何文本长度。它甚至可以在同一行使用多个选择:

.container {
  display: inline-block;
  width: 6rem;
}

.item {
  width: 100%;
  background-color: lightblue;
  line-height: 2rem;
  float: left;
}

.item.active {
  color: white;
  background-color: darkblue;
  float: none;
  clear: left;
}


div:not([class]) {
  margin:5px;
  outline:1px solid red;
}

<div>The selected element:
<div class="container">
  <div class="item a">Pineapple</div>
  <div class="item b active">Apple</div>
  <div class="item c">Tomato</div>
  <div class="item d">Banana</div>
</div>
</div>

<div>The selected :
<div class="container">
  <div class="item a">Pineapple</div>
  <div class="item b">Apple</div>
  <div class="item c active">Tomato</div>
  <div class="item d">Banana</div>
</div>
</div>

<div>The selected element is the :
<div class="container">
  <div class="item a">Pineapple</div>
  <div class="item b">Apple</div>
  <div class="item c">Tomato</div>
  <div class="item d active">Banana</div>
</div>
The selected :
<div class="container">
  <div class="item a">Pineapple</div>
  <div class="item b active">Apple</div>
  <div class="item c">Tomato</div>
  <div class="item d">Banana</div>
</div>
</div>

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge ^ref

确保您没有向内联块元素添加任何 oveflow 属性: