Свяжите три выпадающих списка горизонтально с линией в HTML

Question

Как связать три выпадающих списка по горизонтали со строкой в ​​html?Предположим, ABC - это три выпадающих списка, я хочу связать их по горизонтали, как это A ---- B ---- C.Как мне этого добиться?

Answer 1

Вот пример того, как сделать это с помощью flexbox и горизонтальной линии, созданной с помощью psuedo-элемента.См. CSS комментарии для объяснения!

.boxes {
  /* create a flexbox and align elements */
  display: flex;
  justify-content: space-between;
  /* allow child elements to position off this parent */
  position: relative;
}

.boxes::before {
  /* create psuedo-element */
  content: '';
  background: black;
  /* position element to center vertically and fill horizontally */
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  /* position behind content */
  z-index: -1;
}

<div class="boxes">
  <select>
    <option>A</option>
  </select>
  <select>
    <option>B</option>
  </select>
  <select>
    <option>C</option>
  </select>
</div>