在HTML和CSS中缩进列表

Question

在HTML和CSS中缩进列表

32

我对 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 文件？非常感谢您的帮助。

- Alan

2

根据他的问题说明，我认为他想问如何在本地覆盖主要的CSS。在这种情况下，他的主要CSS是无关紧要的，但如果不是这种情况，那么是的。 - Kalle H. Väravas

7个回答

14

听起来像是您的一些样式被重置了。

在大多数浏览器中，默认情况下，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/

- Jason Gennaro

11

我通过在嵌套列表中添加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;
}

- Maria Berinde-Tampanariu

1

一个更好的解决方案是避免在标记中使用id或class，而严格使用CSS来完成。margin或padding是更好的选择。 - Octopus

3

通常，所有列表都垂直显示。您是否想要水平显示？

无论如何，您要求覆盖主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>

- Kalle H. Väravas

我非常怀疑他想要水平项目，因为他询问的是列表的缩进。 - Madara's Ghost

相同，但它是作为本地 CSS 示例的一个例子。我非常怀疑他也想设置 padding-left: 10px;..? - Kalle H. Väravas

3

你也可以使用HTML本地覆盖CSS。我之前遇到了类似的问题，这个方法对我很有效：

<html>
<body>

<h4>A nested List:</h4>
<ul style="PADDING-LEFT: 12px">
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

- sk8forether

3

你可以使用[W3 CSS选择器建议]中描述的相邻兄弟组合器1。因此，你可以使用+符号(甚至是~波浪号)对嵌套的ul标签应用填充，就像你在问题中描述的那样，你将得到所需的结果。我认为你想要的是局部地覆盖主要CSS。你可以这样做：

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

这样，内部的ul将嵌套包含li元素的符号。

希望这对您有所帮助！=）

- Metafaniel

2

li {
  padding-left: 30px;
}

<p>Some text to show left edge of container.<p>
<ul>
  <li>List item</li>
</ul>

The above will add 30px of space between the bullet or number and your text.

li {
  margin-left: 30px;
}

<p>Some text to show left edge of container.<p>
<ul>
  <li>List item</li>
</ul>

The above will add 30px of space between the bullet or number and the left edge of the container.

- Karim Shaloh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Madara's Ghost · Accepted Answer

是的，只需使用类似以下方式：

ul {
  padding-left: 10px;
}

这将会使得每个后续的 ul 垂直方向上下移动10个像素。

演示 jsFiddle