CODEWITHSUNDEEP
htmlcss
interstar
interstar

Reputation: 27186

Indents in nested lists in HTML / CSS

I've started using Twitter Bootstrap, which is useful for me (as a programmer) to get a decent looking site without having to write much CSS.

However something is driving me crazy. I have a nested list like

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

But the first and second level of this list are NOT getting indented differently (ie. they align with each other on the left)

In normal html nested lists, deeper sublists indent more. But something in the style sheet must be turning this off. How do I find what controls this? I can't see a CSS "list indent" attribute for li elements in any documentation.

Upvotes: 24

Views: 63098

Answers (7)

ncode
ncode

Reputation: 71

You wouldn't want to apply the padding onto the li elements since that would create a padding between the bullet and the list if you are using a bulleted list. See:

ul > li {
    padding-left:25px;
}

result:

-    Hello
-    World 
    -    Wide
    -    Web

Neither would you want to apply it to the parent ul elements with ul { padding-left:25px;} which would give:

    - Hello 
    - World 
        - Wide
        - Web

The answer to your question is:

li > ul {
    padding-left:25px;
}

result:

- Hello
- World 
    - Wide
    - Web

Upvotes: 5

Du-Lacoste
Du-Lacoste

Reputation: 12767

Using Bootstrap you could do that by coding as follows. Just paste it your JSP or HTML and test it. You could go through this link for more information.

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;
}

Upvotes: 0

Marius
Marius

Reputation: 3501

Is it perhaps that you have set your bullets points to be inside the list items instead of before it, which would change your look quite significantly.

The CSS to apply it: ul { list-style-position: inside; }

Read more about list-style-position.

Example : https://jsfiddle.net/g0k0obwh/

Upvotes: 3

fkoessler
fkoessler

Reputation: 7257

I had the same problem as you.

There's a rule in type.less that cancels the indentation for lists:

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

I ended up overriding this rule:

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

Indentation in nested lists is now back.

Upvotes: 7

evophage
evophage

Reputation: 169

Just to add to the answers above: padding-left will indent the words, but not the bullet point, while margin-left will indent the bullet point as well.

Example: http://jsfiddle.net/GMLxv/

Upvotes: 9

calebds
calebds

Reputation: 26228

Just use Firebug in FF or Chrome dev-tools: right-click on your target and select inspect element. You can visually and textually inspect the CSS properties to see what's causing the collapse.

You probably want a rule like

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

Upvotes: 27

David Souther
David Souther

Reputation: 8174

You're looking to set padding-left:

li { padding-left: 1em; }

will indent every li 1em. Since the inner lis are already offset from the outer lis, it should do what you want.

Upvotes: 5

Related Questions