Indent List in HTML and CSS

Question

I m new to CSS and working with list  I tried using one of the code I saw on w3schools which shows how to indent lists    lt html gt   lt body gt    lt h4 gt A nested List  lt  h4 gt   lt ul gt     lt li gt Coffee lt  li gt     lt li gt Tea      lt ul gt       lt li gt Black tea lt  li gt       lt li gt Green tea lt  li gt       lt  ul gt     lt  li gt     lt li gt Milk lt  li gt   lt  ul gt    lt  body gt   lt  html gt    My css is overriding it so it all apears on the same vertical line   Is there any CSS code I could use locally on the list to override the main css file  Any help would be appreciated

User · Answer

I solved the same problem by adding text-indent to the nested list     lt h4 gt A nested List  lt  h4 gt   lt ul gt     lt li gt Coffee lt  li gt     lt li gt Tea      lt ul id  list2  gt       lt li gt Black tea lt  li gt       lt li gt Green tea lt  li gt       lt  ul gt     lt  li gt     lt li gt Milk lt  li gt   lt  ul gt    list2    text-indent 50px

User · Answer

x000D   x000D  li     padding-left  30px    x000D   lt p gt Some text to show left edge of container  lt p gt   lt ul gt     lt li gt List item lt  li gt   lt  ul gt  x000D   x000D   x000D   The above will add 30px of space between the bullet or number and your text   x000D   x000D  li     margin-left  30px    x000D   lt p gt Some text to show left edge of container  lt p gt   lt ul gt     lt li gt List item lt  li gt   lt  ul gt  x000D   x000D   x000D   The above will add 30px of space between the bullet or number and the left edge of the container

User · Answer

It sounds like some of your styles are being reset   By default in most browsers  uls and ols have margin and padding added to them   You can override this  and many do  by adding a line to your css like so  ul  ol      THERE MAY BE OTHER ELEMENTS IN THE LIST     margin 0      padding 0      In this case  you would remove the element from this list or add a margin padding back  like so  ul      margin 1em      Example  http   jsfiddle net jasongennaro vbMbQ 1

User · Answer

You can also use html to override the css locally   I was having a similar issue and this worked for me    lt html gt   lt body gt    lt h4 gt A nested List  lt  h4 gt   lt ul style  PADDING-LEFT  12px  gt     lt li gt Coffee lt  li gt     lt li gt Tea      lt ul gt       lt li gt Black tea lt  li gt       lt li gt Green tea lt  li gt       lt  ul gt     lt  li gt     lt li gt Milk lt  li gt   lt  ul gt    lt  body gt   lt  html gt

User · Answer

Yes  simply use something like   ul     padding-left  10px      And it will bump each successive ul by 10 pixels   Working jsFiddle

User · Answer

Normally  all lists are being displayed vertically anyways  So do you want to display it horizontally   Anyways  you asked to override the main css file and set some css locally  You cannot do it inside  lt ul gt  with style     that it would apply on the children   lt li gt     Closest thing to locally manipulating your list would be    lt style gt      li  display  inline-block    lt  style gt   lt ul gt     lt li gt Coffee lt  li gt     lt li gt Tea      lt ul gt           lt li gt Black tea lt  li gt           lt li gt Green tea lt  li gt       lt  ul gt     lt  li gt     lt li gt Milk lt  li gt   lt  ul gt

User · Answer

You can use  Adjacent sibling combinators  as described in the W3 CSS Selectors Recommendation1 So you can use a   sign  or even a   tilde  apply a padding to the nested ul tag  as you described in your question and you ll get the result you need  I also think what you want it to override the main css  locally  You can do this    lt style gt      li ul  padding-left  20px    lt  style gt    This way the inner ul will be nested including the bullets of the li elements  I wish this was helpful

[html] Indent List in HTML and CSS

Examples related to html

Examples related to css