CSS set li indent

Question

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

User · Answer

li      margin-left 50px      or replace 50px with whatever you want

User · Answer

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  gt  ul       margin-left  1 5em

User · Answer

Also try   ul     list-style-position  inside

User · Answer

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   x000D   x000D  ul     padding-left  0    x000D   lt ul gt     lt li gt section a      lt ul gt         lt li gt one lt  li gt         lt li gt two lt  li gt         lt li gt three lt  li gt       lt  ul gt     lt  li gt   lt  ul gt   lt ul gt     lt li gt section b      lt ul gt         lt li gt one lt  li gt         lt li gt two lt  li gt         lt li gt three lt  li gt       lt  ul gt     lt  li gt   lt  ul gt  x000D   x000D   x000D   and here s setting margin-left to 0px  Notice the indentation does NOT change   x000D   x000D  ul     margin-left  0    x000D   lt ul gt     lt li gt section a      lt ul gt         lt li gt one lt  li gt         lt li gt two lt  li gt         lt li gt three lt  li gt       lt  ul gt     lt  li gt   lt  ul gt   lt ul gt     lt li gt section b      lt ul gt         lt li gt one lt  li gt         lt li gt two lt  li gt         lt li gt three lt  li gt       lt  ul gt     lt  li gt   lt  ul gt  x000D   x000D   x000D

User · Answer

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

[html] CSS set li indent

Examples related to html

Examples related to css