HTML/CSS中嵌套列表的缩进

我已经开始使用Twitter Bootstrap，它对我（作为程序员）来说很有用，可以在不必编写太多CSS的情况下获得一个体面的外观网站。HTML/CSS中嵌套列表的缩进

但是有些东西令我发狂。我有一个嵌套表像

<ul> 
    <li>Hello</li> 
    <li>World 
    <ul> 
     <li>Wide</li> 
     <li>Web</li> 
    </ul> 
    </li> 
</ul>

但是这个列表的第一级和第二级没有得到缩进不同（即它们相互对齐左）

在正常的HTML嵌套的列表，更深子列表缩进更多。但是样式表中的某些内容必须将其关闭。我如何找到控制它的东西？我无法在任何文档中看到li元素的CSS“list indent”属性。

来源

2012-02-27 interstar

你可以在JSFiddle中重现吗？你的代码与twitter引导工作正常适合我：http://jsfiddle.net/3hHwF/ – 2012-02-27 22:31:41

你正在寻找设置padding-left：

li { padding-left: 1em; }

将缩进每李1EM。由于内部lis已经偏离了外部lis，它应该做你想做的事情。

来源

2012-02-27 22:27:55

只需在FF中使用Firebug或Chrome dev-tools：右键单击您的目标和select inspect元素。您可以通过视觉和文本检查CSS属性来查看导致崩溃的原因。

你可能要像

ul > li { 
    margin-left: 10px; 
}

来源

2012-02-27 22:28:20 paislee

规则只是为了增加上述问题的答案：padding-left将缩进的话，但不是子弹点，而margin-left将缩进子弹点为好。

例子：http://jsfiddle.net/GMLxv/

来源

2013-04-15 08:10:11 evophage

我有同样的问题，因为你。

有一个在type.less抵消对列表缩进规则：

ul, ol { 
    padding: 0; 
    margin: 0 0 @baseLineHeight/2 25px; 
}

我结束了重写规则：

ul, ol { 
    padding: 0px 25px; 
}

缩进嵌套列表是现在回来了。

来源

2013-04-19 05:31:20

也许你已经将你的子弹点设置在列表项中，而不是在它之前，这会显着改变你的外观。

的CSS应用它：ul { list-style-position: inside; }

了解更多关于list-style-position。

例子：https://jsfiddle.net/g0k0obwh/

来源

2015-09-16 21:27:17 Marius

它可能是一些风格设置这一个或另一个......只是应用您的显式设置也许。 – Marius 2015-09-16 21:27:54

使用引导程序，你可以做到这一点的编码如下。只需粘贴您的JSP或HTML并进行测试即可。你可以通过这个链接了解更多信息。

http://www.bootply.com/DglnYJTSKA

<div id="MainMenu"> 
     <div class="list-group panel"> 
      <a href="#demo3" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Item 3</a> 
      <div class="collapse" id="demo3"> 
      <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Subitem 1 <i class="fa fa-caret-down"></i></a> 
      <div class="collapse list-group-submenu" id="SubMenu1"> 
       <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 1 a</a> 
       <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 2 b</a> 
       <a href="#SubSubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubSubMenu1">Subitem 3 c <i class="fa fa-caret-down"></i></a> 
       <div class="collapse list-group-submenu list-group-submenu-1" id="SubSubMenu1"> 
       <a href="#" class="list-group-item" data-parent="#SubSubMenu1">Sub sub item 1</a> 
       <a href="#" class="list-group-item" data-parent="#SubSubMenu1">Sub sub item 2</a> 
       </div> 
       <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 4 d</a> 
      </div> 
      <a href="javascript:;" class="list-group-item">Subitem 2</a> 
      <a href="javascript:;" class="list-group-item">Subitem 3</a> 
      </div> 
      <a href="#demo4" class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu">Item 4</a> 
      <div class="collapse" id="demo4"> 
      <a href="" class="list-group-item">Subitem 1</a> 
      <a href="" class="list-group-item">Subitem 2</a> 
      <a href="" class="list-group-item">Subitem 3</a> 
      </div> 
      <a href="#demo5" class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu">Item 5</a> 
      <div class="collapse" id="demo5"> 
      <a href="#" class="list-group-item">Subitem 1</a> 
      <a href="" class="list-group-item">Subitem 2</a> 
      <a href="" class="list-group-item">Subitem 3</a> 
      </div> 
     </div> 
     </div>

CSS：

.list-group.panel > .list-group-item { 
    border-bottom-right-radius: 4px; 
    border-bottom-left-radius: 4px 
} 
.list-group-submenu { 
    margin-left:20px; 
}

来源

2016-07-11 03:54:58

使用列表组

这给出了一个嵌套列表执行简单的办法：

<ul class="list-group"> 
     <li class="list-group-item">Cras justo odio</li> 
     <li class="list-group-item"> 
       <ul class="list-group"> 
        <li class="list-group-item">Cras justo odio</li> 
        <li class="list-group-item"> 
         <ul class="list-group"> 
          <li class="list-group-item">Cras justo odio</li> 
          <li class="list-group-item">Dapibus ac facilisis in</li> 
         </ul> 
        </li> 

      </ul> 
     </li> 
     <li class="list-group-item">Morbi leo risus</li> 
     <li class="list-group-item">Porta ac consectetur ac</li> 
     <li class="list-group-item">Vestibulum at eros</li> 
</ul>

来源

2016-07-11 06:04:12 pradeep

HTML/CSS中嵌套列表的缩进

回答

相关问题