CSS set li indent
HtmlCssHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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>
Solution 2 - Html
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 li
s and (if applicable) the a
s (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/
Solution 3 - Html
Also try:
ul {
list-style-position: inside;
}
Solution 4 - Html
li{
margin-left:50px;
}
or replace 50px with whatever you want.
Solution 5 - Html
I found that doing it in two relatively simple steps seemed to work quite well. The first css definition for ul sets the base indent that you want for the list as a whole. The second definition sets the indent value for each nested list item within it. In my case they are the same, but you can obviously pick whatever you want.
ul {
margin-left: 1.5em;
}
ul > ul {
margin-left: 1.5em;
}
Solution 6 - Html
Using the chrome dev tools and looking at the styles applied to a ul
element by the user agent stylesheet
(at the time of writing), the default styles in Chrome are:
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
The padding-inline-start
property is used to set the indentation of the bullets (and the bullets of child lists).
> The padding-inline-start CSS property defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
(The other default properties may also help people get the look that they're after)
Note that this was mentioned earlier in a comment by @preferred_anon on another answer, but I missed that when I was first looking, so I've added this answer.