Как сделать правильно списки

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

Всем привет.

Нужно сделать два дива .list с двумя колонками списка и что-бы они делили пространство между собой, но возникает одна проблема, когда в первом диве .list текста мало во втором списке, то текст улетает далеко, а надо чтобы отступ у неё был как у колонок во втором диве .list.

Там из-за текста больше и поэтому список ближе становится относительно первого списка.

Можно ли как-то сделать это?

Хочу сохранить адаптивность не задавая абсолютные величины.

ul li {list-style: none;}

.list {
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
<div class="list">
<ul>
  <li>Lorem ipsum dolor .<li>
  <li>Lorem ipsum dolor<li>
  <li>Lorem ipsum dolor.<li>
</ul>
<ul>
  <li>Lorem .<li>
  <li>Lorem ipsum<li>
  <li>Lorem.<li>
</ul>
</div>


<div class="list">
<ul>
  <li>Lorem ipsum dolor sit amet.<li>
  <li>Lorem ipsum dolor sit amet.<li>
  <li>Lorem ipsum dolor sit amet.<li>
</ul>
<ul>
  <li>Lorem .<li>
  <li>Lorem ipsum<li>
  <li>Lorem ipsum dolor sit amet amet amet<li>
</ul>
</div>

css html вёрстка
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Задать размер для тэга 

 ul li {
  list-style: none;
 }

 ul {
  width: 300px;
 }

.list {
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
<div class="list">
<ul>
  <li>Lorem ipsum dolor .<li>
  <li>Lorem ipsum dolor<li>
  <li>Lorem ipsum dolor.<li>
</ul>
<ul>
  <li>Lorem .<li>
  <li>Lorem ipsum<li>
  <li>Lorem.<li>
</ul>
</div>


<div class="list">
<ul>
  <li>Lorem ipsum dolor sit amet.<li>
  <li>Lorem ipsum dolor sit amet.<li>
  <li>Lorem ipsum dolor sit amet.<li>
</ul>
<ul>
  <li>Lorem .<li>
  <li>Lorem ipsum<li>
  <li>Lorem ipsum dolor sit amet amet amet<li>
</ul>
</div>