0

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

Интересует если это возможно лишь на CSS

1 ответ 1

1

* {
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
}

ul {
  list-style: none;
  /*долго думал, пока не вспомнил про это значение*/
  width: max-content;
}

li {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

div:first-child {
  font-size: 1.5rem;
  font-weight: bold;
}
<ul>
  <li>
    <div>Lorem:</div>
    <div>Lorem</div>
  </li>
  <li>
    <div>Lorem ipsum dolor sit amet, consectetur:</div>
    <div>Lorem ipsum dolor</div>
  </li>
  <li>
    <div>Lorem ipsum dolor:</div>
    <div>lorem</div>
  </li>
</ul>

1
  • Cпасибо за прекрасный пример
    – Dan
    7 дек 2019 в 8:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.