Блог

Главная - Вопросы по программированию - Как вы можете использовать элементы ul и li, чтобы разрешить несколько правильно выровненных столбцов, где каждый столбец не всегда имеет значения

Как вы можете использовать элементы ul и li, чтобы разрешить несколько правильно выровненных столбцов, где каждый столбец не всегда имеет значения

#html #css

Вопрос:

У меня есть несколько разделов ul в моем HTML-документе. В каждом из них используется неупорядоченный список элементов. Для одного очень конкретного ul в HTML у меня есть список таких элементов, как:

    <ul>
     <li>item 1</li>
     <li>item 2</li>
     <li>ck-item 2</li>
     <li>item 3</li>
     <li>item 4</li>
     <li>ck-item 4</li>
     <li>item 5</li>
     <li>ck-item 5</li>
   </ul>

Я пытаюсь найти способ использовать CSS и классы, чтобы для любого ul, для которого требуется несколько столбцов, я мог заставить приведенный выше список привести к следующему:

 item 1
item 2     ck-item2
item 3
item 4     ck-item4
item 5     ck-item5

В принципе, независимо от того, насколько коротким или длинным является фактический текст, скажем, «пункт 2», я хочу, чтобы второй столбец ck-item2 располагался горизонтально с любым другим ck-элементом#s во втором столбце. По сути, фиксированное пространство между столбцами 1 и 2, как если бы вы использовали вкладку или что-то в этом роде, поэтому все, что находится в столбце 2, выстроилось в ряд.

Я потратил последние 8 часов, пытаясь добиться этого безрезультатно. Кажется, что это должно быть легко сделать, но … Мы будем признательны за любую оказанную помощь.

ПРАВКА: Возможно, я не совсем ясно выразился. Например, я могу сделать следующее:

    <ul>
      <li>item 1</li>
      <li>item 2     ck-item 2</li>
      <li>item 3</li>
      <li>item 4     ck-item 4</li>
      <li>item 5     ck-item 5</li>
   </ul>

К сожалению, при таком подходе, в зависимости от того, как долго длится фактический тест для «пункта 2, пункта 4 и пункта 5», вы можете получить результат, который выглядит следующим образом:

 item 1
item 2    ck-item 2
item 3
item 4   ck-item 4
item 5             ck-item 5

Так что это выглядит действительно уродливо. Я надеюсь, что это поможет объяснить, что я пытаюсь сделать.

Комментарии:

1. Нет никакого способа в чистом CSS сказать «элементы с > последним символом принадлежат второму столбцу». Это странный способ структурировать ваш HTML; я бы предложил изменить его на вложенные списки или таблицу.

2. Соглашаясь с @DanielBeck — похоже, что здесь происходит то, что вы используете семантически несоответствующий элемент для попытки отображения ваших данных. Даже если бы вы могли придумать способ взломать его с помощью CSS, это, скорее всего, сбило бы с толку при чтении (в коде), было бы сложно поддерживать, плохо для SEO и плохо для вспомогательных технологий, таких как программы для чтения с экрана. Я бы рекомендовал просмотреть ваши данные и пересмотреть наиболее семантически подходящий способ их переноса в HTML.

Ответ №1:

Если это не критично, вы можете поставить какой-нибудь знак между словом и числом или убрать пробел. После этого используйте свойство css word-spacing .

 ul {
  list-style: none;
}
li {
  word-spacing: 3em;
} 
 <ul>
  <li>item#1</li>
  <li>item#2 ck-item#2</li>
  <li>item#3</li>
  <li>item#4 ck-item#4</li>
  <li>item#5 ck-item#5</li>
</ul>

Ответ №2:

Вы можете использовать CSS-сетку.

См. Пример ниже, с последующим пояснением:

 .ul-table {
  display: grid;
  grid-template-columns: max-content max-content;
  list-style-type: none;
  padding: 0;
  column-gap: 20px;
}

.ul-table li {
  border: dashed 1px red;
  white-space: nowrap;
}

.ul-table li.start-new-row {
  grid-column-start: 1;
} 
 <ul class="ul-table">
  <li class="start-new-row">item 1</li>
  <li class="start-new-row">long item 2</li>
  <li>ck-item 2</li>
  <li class="start-new-row">very very long item 3</li>
  <li class="start-new-row">item 4</li>
  <li>ck-item 4</li>
  <li class="start-new-row">item 5</li>
  <li>ck-item 5</li>
</ul>

Объяснение стиля .ul-таблицы:

  • display: grid; Включает компоновку сетки.
  • grid-template-columns: max-content max-content; Создает 2 столбца, каждый из которых достаточно широк, чтобы содержать самый длинный текст, присутствующий в этом столбце.
  • column-gap: 20px = Расстояние между столбцами.

И для стиля .start-новая строка:

  • grid-column-start: 1; Запускает новую строку сетки.
Метки: , ,