CSS set li indent

Поиск в googling и переполнение стека не возвращали никаких результатов, которые я мог бы распознать, поэтому простите меня, если это было задано раньше...

У меня выпадающее главное меню, которое использует списки в качестве основы. Проблема в том, что списки очень широкие, и при расширении они не отступают достаточно далеко. Итак, это моя проблема! Как сделать сумму отступа в списках больше с помощью CSS?

Ответ 1

для отступов выпадающего меню ul, используйте

/* Main Level */
ul{
  margin-left:10px;
}

/* Second Level */
ul ul{
  margin-left:15px;
}

/* Third Level */
ul ul ul{
  margin-left:20px;
}

/* and so on... */

Вы можете отложить li и (если применимо) a (или любые элементы контента, которые у вас есть), каждый из которых имеет разные эффекты. Вы также можете использовать padding-left вместо margin-left, снова в зависимости от эффекта, который вы хотите.

Обновить

По умолчанию многие браузеры используют padding-left для установки начального отступа. Если вы хотите избавиться от этого, установите padding-left: 0px;

Тем не менее, как margin-left и padding-left настройки влияют на отступы списков по-разному. В частности: margin-left влияет на отступ на внешней границе элемента, тогда как padding-left влияет на интервал внутри границы элемента. (Узнайте больше о модели CSS-box здесь)

Установка padding-left: 0; оставляет иконки li bullet, висящие над краем границы элемента (по крайней мере, в Chrome), что может быть или не быть тем, что вы хотите.

Примеры padding-left vs margin-left и как они могут работать вместе на ul: https://jsfiddle.net/daCrosby/bb7kj8cr/1/

Ответ 2

padding-left - это то, что контролирует отступ ul не margin-left.

Compare: Здесь настройка padding-left на 0px, заметите, что все отступы исчезают.

ul {
  padding-left: 0px;
}

<ul>
  <li>section a
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </li>
</ul>
<ul>
  <li>section b
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </li>
</ul>

Ответ 3

Также попробуйте:

ul {
  list-style-position: inside;
}

Ответ 4

li{
    margin-left:50px;
}

или замените 50px тем, что вы хотите.

Ответ 5

Я обнаружил, что делать это на двух относительно простых шагах, казалось, работает очень хорошо. Первое определение css для ul устанавливает базовый отступ, который вы хотите для списка в целом. Второе определение устанавливает значение отступа для каждого вложенного элемента списка внутри него. В моем случае они одинаковы, но вы, очевидно, можете выбрать то, что хотите.

ul {
    margin-left: 1.5em;
}

ul > ul {
    margin-left: 1.5em;
}