ul нет маржи на первом уровне вложенного списка? - PullRequest
6 голосов
/ 04 июля 2011

Мне нужен стилизованный список, у которого на первом уровне нет поля слева. Но есть ли на последующих, выровненных подсписках ... Кто-нибудь знает, как это сделать?

<ul>
<li>no margin</li>
<li>
    <ul>
    <li>yes margin</li>
    </ul>
</li>
</ul>

(без добавления классов CSS на первый уровень ul или изменения какого-либо кода)

Ответы [ 5 ]

8 голосов
/ 04 июля 2011

Если вы хотите, чтобы это применялось ко всем <ul> s на каждой странице, к которой применяется таблица стилей, это работает:

ul {/* Remove margin for all <ul>s (and padding, because different browsers have different default styles) */
     margin-left: 0;
     padding-left: 0;
}

ul ul {/* Add a margin for any <ul> inside another <ul> */
    margin-left: 2em;
}

Но если вы хотите, чтобы она применялась только к определенным спискам, вам нужнодобавить что-то в HTML, чтобы идентифицировать эти списки (как предлагали другие ответы).

4 голосов
/ 04 июля 2011

Вы, вероятно, должны очистить поле основного <ul>, а затем установить поле для <ul>, содержащегося в элементе <li>.

ul {
    margin-left: 0px;
}

li > ul {
    margin-left: 10px;
}
3 голосов
/ 04 июля 2011

Является ли первая ул прямым потомком тела? Я знаю, что вы сказали, что не добавляете классы CSS в код, но я полагаю, что добавление материала в таблицу стилей не является вопросом? Если это так, вы можете использовать объявление стиля как:

body > ul{
 margin-left:0px;
}

или если вы знаете div, он находится внутри:

#your_id > ul{
margin-left:0px;
}

Там также может быть заполнение по умолчанию, которое необходимо учитывать.

Спасибо

1 голос
/ 04 июля 2011

Действительно, но небольшое дополнение к ответу TommyBs: вам нужно применить идентификатор, который вы используете в теге html list item, например:

<ul>
<li id="your_id">no margin</li>
<li>
    <ul>
    <li>yes margin</li>
    </ul>
</li>
</ul>

И в css соответствующая строка будет

li#your_id {
  margin-left:0px;
}
0 голосов
/ 15 августа 2015

В моем случае были поля по умолчанию, и я установил их 0 -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0;

...