Заголовок пользовательского списка, выровненный по правому краю

#html #css

#HTML #css

Вопрос:

Я пытаюсь реализовать пользовательский список, похожий на обычный HTML-список, где заголовок списка выровнен по правому краю.

 p { padding: 0; margin: 0 }

 <div style="display: flex; margin-left: 20px;">
  <p style="width: 20px; text-align: right;">i.</p>
  <div style="flex: 1;">
    <p>123</p>
  </div>
</div>
<div style="display: flex; margin-left: 20px;">
  <p style="width: 20px; text-align: right;">ii.</p>
  <div style="flex: 1;">
    <p>1</p>
  </div>
</div>

Это плохо работает, когда заголовок списка превышает ширину контейнера.

 <div style="display: flex; margin-left: 20px;">
  <p style="width: 20px; text-align: right;">iiiiiii.</p>
  <div style="flex: 1;">
    <p>123</p>
  </div>
</div>

Как мне сделать так, чтобы текст переливался влево, а не вправо? Я также пытался использовать абсолютную позицию, но безуспешно. К сожалению, я не могу использовать псевдоэлемент или любые элементы списка html, поскольку мне нужно подключить к нему прослушиватель событий.

1. Почему вы не можете поместить обработчики событий в элементы списка?

2. Возможно, ваше намерение неясно и, возможно, необходимо дополнительное описание, но то, что вы показываете, будет отклонено при проверке кода для корпоративного приложения. Вероятно, есть способ получше….

3. Вы правы, я могу прикрепить событие в li, но html-элемент по умолчанию сложно настроить. например, настроить определенный символ заголовка, изменить цвет без изменения цвета текстового содержимого списка и т.д. Есть ли простой способ сделать это?

4. @Mengo, работает ли приведенное ниже решение для вашего варианта использования?

5. @Mengo смотрите мой обновленный пример. Элементом по умолчанию по-прежнему является любой тип отображения, который вам нравится, поскольку он по-прежнему зависит от модели CSS box (точно так же, как ваши divs и дополнительные элементы в вашем примере). То, что показано, является самым чистым и наиболее совместимым примером из представленных…

Ответ №1:

Вы могли бы использовать text-align: right в сочетании с direction: rtl для изменения направления текста.

Пожалуйста, смотрите ниже:

 .text-direction {
  direction: rtl;
  text-align: right;
}
p{
  margin: 0
}

 <div style=" margin-left: 60px;">
  <div style="display:flex">
  <p style="width: 20px; text-align: right;" class="text-direction">.ii</p>
  <div style="flex: 1;">
    <p>123456</p>
  </div>
  </div>
  <div style="display:flex">
  <p style="width: 20px; text-align: right;" class="text-direction">.iiii</p>
  <div style="flex: 1;">
    <p>123</p>
  </div>
  </div>
</div>

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

Ответ №2:

На моем месте я бы хотел сохранить его семантически корректным. Смотрите ниже.

 ol.special-list {
  counter-reset: item;
  list-style-type: none;
  padding: 0;
}

ol.special-list li:after {
  counter-increment: item;
  content: " ." counter(item, upper-roman);
  font-weight: 600;
  color: red;
}

 <ol class="special-list">
  <li>Blah 1</li>
  <li>Blah Blah 2</li>
  <li>Blah 3</li>
  <li>Blah Blah Blah Blah 4</li>
  <li>Blah 5</li>
</ol>

1. Я обновил свой вопрос, это пользовательский список, поэтому не допускаются li, ol, ul.

2. Почему элемент списка должен быть запрещен?

3. Нам не нужно вставлять «.» если мы используем HTML-список по умолчанию. тип стиля списка: строчный римский сделает всю работу.