Список отступа в HTML и CSS

Я новичок в CSS и работаю со списком. Я попытался использовать один из кода, который я видел в w3schools, который показывает, как отступы:

<html>
<body>

<h4>A nested List:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

Мой css переопределяет его, так что все это появляется на одной вертикальной линии. Есть ли какой-либо код CSS, который я мог бы использовать локально в списке, чтобы переопределить основной файл css? Любая помощь будет оценена.

Ответ 1

Да, просто используйте что-то вроде:

ul {
  padding-left: 10px;
}

И он будет ударять каждый следующий ul на 10 пикселей.

Работает jsFiddle

Ответ 2

Похоже, что некоторые из ваших стилей составляют reset.

По умолчанию в большинстве браузеров ul и ol добавлены margin и padding.

Вы можете переопределить это (и многие из них), добавив строку к вашему css, например:

ul, ol {  //THERE MAY BE OTHER ELEMENTS IN THE LIST
    margin:0;
    padding:0;
}

В этом случае вы удалите элемент из этого списка или добавьте обратно margin/padding, например

ul{
    margin:1em;
}

Пример: http://jsfiddle.net/jasongennaro/vbMbQ/1/

Ответ 3

Я решил ту же проблему, добавив text-indent во вложенный список.

<h4>A nested List:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul id="list2">
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

#list2
{
 text-indent:50px;
}

Ответ 4

Вы можете использовать [Комбинированные смежные братья и сестры], как описано в Рекомендации W3 CSS Selectors 1 Таким образом, вы можете использовать знак + (или даже ~ тильда) применить дополнение к вложенному тегу ul, как вы описали в своем вопросе, и вы получите нужный результат. Я также думаю, что вы хотите, чтобы он перекрывал основной css, локально. Вы можете сделать это:

<style>
    li+ul {padding-left: 20px;}
</style>

Таким образом, внутренний ul будет вложен, включая пули элементов li. Я бы хотел, чтобы это было полезно! =)

Ответ 5

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

В любом случае вы попросили переопределить основной файл css и установить некоторый css локально. Вы не можете сделать это внутри <ul> с помощью style="", что оно применимо к дочерним элементам (<li>).

Ближайшая вещь для локального управления вашим списком:

<style>
    li {display: inline-block;}
</style>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
        <li>Black tea</li>
        <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>