Центрирование / выравнивание вертикального списка на активном элементе

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 должен делать то, что я хочу. Тем не менее, я не нашел способа сделать это, сохранив стопку предметов в целости.
• Поплавки не всегда влияют на высоту контейнера, но inline-block гарантирует, что все поплавки содержатся. Возможно, есть способ достичь этого с помощью поплавков и еще нескольких уровней контейнеров?

Answer 1

Вот простая идея, где вы можете хранить свой код и полагаться на выравнивание базовой линии по умолчанию. Хитрость заключается в том, чтобы сделать все элементы плавающими, но не активными, и это определит базовую линию его родителя.

Он также масштабируем и будет работать с любой длиной текста. Он может даже работать с множественным выбором в одной строке:

.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>

Базовая линия 'inline-block' является базовой линией его последней строки в нормальном потоке , если только у него либо нет линейных блоков в потоке, либо если его свойство 'overflow' имеет вычисленное значение, отличное от 'visible', в этом случае базовой линией является нижний край поля ^ref

Убедитесь, что вы не добавляете какое-либо свойство oveflow к элементу inline-block:

Answer 2

Я понял, что вы хотите, чтобы центр выравнивал текст по левой стороне. Вы можете сделать это, используя псевдоэлементы. В основном псевдоэлемент содержит текст, и он расположен абсолютно слева (или справа) от списка

.container {
   display: inline-block;
   flex-wrap: wrap;
   width: 6rem;
   margin-left: 10em;
}

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

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

.item.active::before {
  content: "The selected element: ";
  display: block;
  position: absolute;
  right: 105%;
  height: 100%;
  white-space: nowrap;
  color: black;
}

<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 class="container">
  <div class="item d">Orange</div>
  <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>

Это способ перемещать элементы списка, которые, как я думал, были именно тем, что вы хотели, но после прочтения вопросов, я не думаю, что это все , Однако я оставил его здесь, потому что подумал, что он может дать вам некоторые идеи.

Контейнер настроен на отображение встроенного изгиба, все элементы установлены на порядок 1, в то время как активный элемент равен 0. Порядок делает элементы на основе этого realign и поскольку активный элемент имеет более высокий порядок, он появится первым

.select-text {
  display: inline-block;
}
.container {
   display: inline-flex;
   flex-wrap: wrap;
   width: 6rem;
}

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

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

<div class="select-text">The selected element: </div>
<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>

<br /><br />

<div class="select-text">The selected element: </div>
<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 class="item d">Orange</div>
</div>