Как разместить маркированный список в одну строку?

Рейтинг: 1Ответов: 1Опубликовано: 16.07.2023

введите сюда описание изображения

Надо сделать вот так.

<ul class="options">
    <li class="option">Литер 14</li>
    <li class="option">Этаж 10</li>
    <li class="option">Сдача 1 кв. 2026</li>
</ul>

.options
  display: flex
  color: #9AADC6
  width: 253px
  font-family: 'Open Sans', sans-serif
  font-size: 14px
  font-style: normal
  font-weight: 400

.option
  line-height: 157.143%
  white-space: nowrap
  margin-right: 22px
    
  &:first-child
    list-style: none
  1. Я сделал это вот так, но из-за margin-right у эл-тов li маркер находится не на одинаковом расстоянии от каждой из сторон (т.е. от "14" до "точки" расстояние меньше, чем от "точки" до "Этаж", это нужно заменить на решение лучше).
  2. Также не получается поменять цвет маркера.

Цвет точки #224E9C, а текста #9AADC6.

введите сюда описание изображения

css ul li
Источник: Stack Overflow на русском

Ответы

▲ 1

Можно реализовать это с помощью before. Центральная позиция между двух <li> рассчитывается так:

.option:before {
  left: -12.5px; //половина margin-left + половина ширины точки -(11px + 1.5px)
}


.options {
  display: flex;
  color: #9AADC6;
  width: 253px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}

.option {
  line-height: 157.143%;
  white-space: nowrap;
  margin-left: 22px;
  list-style: none;
  position: relative;
}

.option:before {
  content: "";
  background: #224E9C;
  width: 3px;
  height: 3px;
  display: block;
  border-radius: 50%;
  position: absolute;
  left: -12.5px;
  top: 50%;
  transform: translateY(-50%);
}

.option:first-child {
  margin-left: 0;
}

.option:first-child:before {
  width: 0;
}
<ul class="options">
  <li class="option">Литер 14</li>
  <li class="option">Этаж 10</li>
  <li class="option">Сдача 1 кв. 2026</li>
</ul>