Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS set li indent

Tags:

html

css

Googling and searching stack overflow did not return any results that I could recognize, so forgive me if this has been asked before...

I have drop down main menu which uses lists as its basis. The problem is, the lists are very wide, and they do not indent far enough when expanded. So, this is my problem! How do I make the indent amount on lists larger via CSS?

like image 635
Georges Oates Larsen Avatar asked Jul 12 '12 05:07

Georges Oates Larsen


People also ask

How do I indent Li in CSS?

An ordered list element (<ol>) will indent its list items by default. If you'd like to change the indentation distance, then you can use CSS. In this case, you won't use the text-indent property. Instead, you'll use the margin-left or padding-left property.

How do you indent the second line in CSS?

Method 2: By making the position relative to the first line, set the text-indent to -26px and padding-left value to 26px. Here in this example, we have made the position of the second line relative to the first line. So the second line is indented/aligned according to the first line.

How do I align a list in CSS?

Position The List Item Markers. The list-style-position property specifies the position of the list-item markers (bullet points). "list-style-position: outside;" means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically.


2 Answers

padding-left is what controls the indentation of ul not margin-left.

Compare: Here's setting padding-left to 0, notice all the indentation disappears.

ul {   padding-left: 0; }
<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>

and here's setting margin-left to 0px. Notice the indentation does NOT change.

ul {   margin-left: 0; }
<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>
like image 125
gman Avatar answered Nov 01 '22 23:11

gman


to indent a ul dropdown menu, use

/* Main Level */ ul{   margin-left:10px; }  /* Second Level */ ul ul{   margin-left:15px; }  /* Third Level */ ul ul ul{   margin-left:20px; }  /* and so on... */ 

You can indent the lis and (if applicable) the as (or whatever content elements you have) as well , each with differing effects. You could also use padding-left instead of margin-left, again depending on the effect you want.

Update

By default, many browsers use padding-left to set the initial indentation. If you want to get rid of that, set padding-left: 0px;

Still, both margin-left and padding-left settings impact the indentation of lists in different ways. Specifically: margin-left impacts the indentation on the outside of the element's border, whereas padding-left affects the spacing on the inside of the element's border. (Learn more about the CSS box model here)

Setting padding-left: 0; leaves the li's bullet icons hanging over the edge of the element's border (at least in Chrome), which may or may not be what you want.

Examples of padding-left vs margin-left and how they can work together on ul: https://jsfiddle.net/daCrosby/bb7kj8cr/1/

like image 43
DACrosby Avatar answered Nov 02 '22 01:11

DACrosby