Отступ текста в неупорядоченных списках с помощью CSS

#css #list #styling #unordered

#css #Список #оформление #неупорядоченный

Вопрос:

У меня есть неупорядоченный HTML-список, и я использую CSS для оформления всего. Когда текст состоит из нескольких строк, он начинается перед точкой маркирования. Есть ли способ заставить его начинаться после позиции маркера?

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

Ответ №1:

Вы хотите использовать list-style-position:outside на своем <ul>

JsFiddle

1. в вашем примере, если я удалю list-style-position:outside , это никак не повлияет на структуру.

2. Большое спасибо, на самом деле я использовал list-style-position: inside; потому что я хотел сделать отступ во всех пунктах маркера. Когда я использую внешнее значение, я, похоже, больше не могу применять margin-left / padding-left к ul / li.

3. Да, обычно он используется по умолчанию. inside будет делать то, что показано в примере OP.

4. @Frank Vilea: Должно быть что-то еще в вашем css, здесь это работает нормально. Поиграйте со скриптом, если вам нужно посмотреть, как на это влияют float, свойства отображения и т.д. Я не могу точно сказать, в чем проблема, не видя кода.

5. Спасибо, мне просто пришлось применить float: left; вот что я забыл и почему это не работало ранее.

Ответ №2:

Пожалуйста, попробуйте использовать это свойство

 li {
    list-style-position:outside;
}

или внутри одного или другого. Это должно устранить проблему.

Ответ №3:

Конечно, достаточно просто. В вашем <li> сделайте это:

 <li>
  <div>Schnelles Importieren von Images As Planes</div> 
</li>

1. Спасибо Кон. Я пробовал это, но, похоже, это вызывает проблемы с Firefox.

2. Что ж, вероятно, вам придется внести некоторые изменения в стиль (например, поля, отступы, отображать встроенным?)

3. Firefox по какой-то странной причине запускал текст с новой строки. Раньше это был чистый текст, поэтому я забыл применить float: left; к новому списку маркеров, из-за чего все эти значения не работали.

4. Добавление divs — это скорее последнее средство, когда доступны css-решения.

5. @Kon: CSS предназначен для оформления документов. HTML предназначен для описания того, что они содержат. Добавление бессмысленного div в элемент списка для достижения визуального эффекта, который легко возможен с помощью CSS, для меня не имеет никакого преимущества или цели, но я был бы готов выслушать возражения.

Ответ №4:

Это наиболее сжатый CSS, использующий синтаксис сокращенных свойств:

  ul {
    list-style: disk outside;
 }