CSS设置li缩进

Question

谷歌搜索和搜索堆栈溢出并没有返回任何我能识别的结果,所以请原谅我,如果之前已经问过...

我有下拉主菜单,它以列表为基础.问题是,列表非常宽,并且在扩展时它们不会缩进得足够远.所以,这是我的问题!如何通过CSS使列表中的缩进量更大？

Answer 1

padding-left是什么控制的压痕ul没有margin-left.

比较:这里设置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>

这是设置margin-left为0px.请注意,缩进不会更改.

ul {
  margin-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>

Answer 2

要缩进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... */

你也可以缩进lis和(如果适用)as(或你拥有的任何内容元素),每个都有不同的效果.您也可以使用padding-left而不是margin-left取决于您想要的效果.

更新

默认情况下,许多浏览器用于padding-left设置初始缩进.如果你想摆脱它,设置padding-left: 0px;

但是,两者margin-left和padding-left设置都以不同的方式影响列表的缩进.具体来说: margin-left影响元素边框外侧的缩进,而padding-left影响元素边框内侧的间距.(在此处了解有关CSS盒子模型的更多信息)

设置padding-left: 0;会将li的子弹图标悬挂在元素边框的边缘(至少在Chrome中),这可能是您想要的,也可能不是.

padding-left vs margin-left的示例以及它们如何在ul上一起工作:https://jsfiddle.net/daCrosby/bb7kj8cr/1/

Answer 3

还试试:

ul {
  list-style-position: inside;
}

Answer 4

li{
    margin-left:50px;
}

或者用你想要的任何东西替换50px.