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?
Also try:
ul {
list-style-position: inside;
}
li{
margin-left:50px;
}
or replace 50px with whatever you want.
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;
}
_x000D_
<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>
_x000D_
and here's setting margin-left
to 0px
. Notice the indentation does NOT change.
ul {
margin-left: 0;
}
_x000D_
<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>
_x000D_
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;
}
Source: Stackoverflow.com