How to keep indent for second line in ordered lists via CSS

Question

I want to have an  inside  list with list bullets or decimal numbers being all flush with superior text blocks  Second lines of list entries have to have the same indent like the first row   E g    Lorem ipsum dolor sit amet  consectetuer adipiscing elit   Aenean commodo ligula eget dolor  Aenean Aenean massa   Cum sociis natoque penatibus et magnis dis parturient montes   nascetur ridiculus mus  Donec quam felis   1  Text 2  Text 3  longer Text  longer Text  longer Text  longer Text  longer Text  longer Text    second line of longer Text 4  Text  Lorem ipsum dolor sit amet  consectetuer adipiscing elit   Aenean commodo ligula eget dolor     CSS provides only two values for its  list-style-position  - inside and outside  With  inside  second lines are flush with the list points not with the superior line   3  longer Text  longer Text  longer Text  longer Text  longer Text  longer Text second line of longer Text 4  Text   Width  outside  my list is not flush with superior text blocks anymore   Experiments width text-indent  padding-left and margin-left work for unordered lists but they fail for ordered lists because it depends on the list-decimal s number of characters    Lorem ipsum dolor sit amet  consectetuer adipiscing elit    Aenean commodo ligula eget dolor     3  longer Text  longer Text  longer Text  longer Text  longer Text  longer Text     second line of longer Text  4  Text 11  Text 12  Text    11   and  12   aren t flush with the superior text block compared to  3   and  4     So where s the secret about ordered lists and the second-line-indent  Thank s for your effort

User · Answer

I believe this will do what you are looking for.

.cssClass li {
    list-style-type: disc;
    list-style-position: inside;
    text-indent: -1em;
    padding-left: 1em;
}

JSFiddle: https://jsfiddle.net/dzbos70f/

User · Answer

I believe you just need to put the list  bullet  outside of the padding   li       list-style-position  outside      padding-left  1em

User · Answer

You can set the margin and padding of either an ol or ul in CSS  ol   margin-left  0  padding-left  3em  list-style-position  outside

User · Answer

Update  This answer is outdated  You can do this a lot more simply  as pointed out in another answer below    ul     list-style-position  outside      See https   www w3schools com cssref pr list-style-position asp  Original Answer  I m surprised to see this hasn t been solved yet  You can make use of the browser s table layout algorithm  without using tables  like this   ol       counter-reset  foo      display  table     ol  gt  li       counter-increment  foo      display  table-row     ol  gt  li  before       content  counter foo           display  table-cell     aha         text-align  right      Demo  http   jsfiddle net 4rnNK 1     To make it work in IE8  use the legacy  before notation with one colon

User · Answer

CSS provides only two values for its  list-style-position  - inside and outside  With  inside  second lines are flush with the list points not with the superior line   In ordered lists  without intervention  if you give  list-style-position  the value  inside   the second line of a long list item will have no indent  but will go back to the left edge of the list  i e  it will left-align with the number of the item   This is peculiar to ordered lists and doesn t happen in unordered lists   If you instead give  list-style-position  the value  outside   the second line will have the same indent as the first line   I had a list with a border and had this problem  With  list-style-position  set to  inside   my list didn t look like I wanted it to  But with  list-style-position  set to  outside   the numbers of the list items fell outside the box    I solved this by simply setting a wider left margin for the whole list  which pushed the whole list toward the right  back into the position it was in before   CSS   ol classname  margin 0 padding 0    ol classname li  margin 0 5em 0 0 0 padding-left 0 list-style-position outside    HTML    lt ol class  classname  style  margin 0 0 0 1 5em   gt

User · Answer

The following CSS did the trick   ul      margin-left  1em     li      list-style-position  outside      padding-left  0 5em

User · Answer

The easiest and cleanest way  without any hacks  is to just to indent the ul  or ol   like so  ol     padding-left  40px     Or whatever padding your font size needs    This gives the same result as the accepted answer  https   jsfiddle net 5wxf2ayu  Screenshot

User · Answer

The ol  ul lists will work if you want you can also use a table with border  none in the css

User · Answer

Check this fiddle   http   jsfiddle net K6bLp   It shows how to manually indent ul and ol using CSS   HTML     lt head gt       lt title gt Lines lt  title gt   lt  head gt    lt body gt       lt ol type  1  style  list-style-position inside   gt           lt li gt Text lt  li gt           lt li gt Text lt  li gt           lt li  gt longer Text  longer Text  longer Text  longer Text    second line of longer Text         lt  li gt       lt  ol gt         lt br  gt       lt ul gt           lt li gt Text lt  li gt           lt li gt Text lt  li gt           lt li gt longer Text  longer Text  longer Text  longer Text    second line of longer Text                 lt  li gt       lt  ul gt   lt  body gt      CSS  ol        margin 0px      padding-left 15px     ol li        margin  0px      padding  0px      text-indent  -1em      margin-left  1em     ul       margin 0      padding-left 30px     ul li        margin  0px      padding  0px      text-indent  0 5em      margin-left  -0 5em      Also I edited your fiddle  http   jsfiddle net j7MEd 3   Make a note of it

User · Answer

I m quite fond of this solution myself   ul       list-style-position  inside      list-style-type  disc      font-size  12px      line-height  1 4em      padding  0 1em     ul li       margin  0 0 0 1em      padding  0 0 0 1em      text-indent  -2em

User · Answer

You can use CSS to select a range  in this case  you want list items 1-9   ol li nth-child n 1  nth-child -n 9     Then adjust margins on those first items appropriately   ol li nth-child n 1  nth-child -n 9    margin-left   55em    ol li nth-child n 1  nth-child -n 9  em  ol li nth-child n 1  nth-child -n 9  span   margin-left  19px      See it in action here  http   www wortfm org wort-madison-charts-for-the-week-beginning-11192012

User · Answer

my solution is quite the same as Pumbaa80 s one  but I suggest to use display  table instead of display table-row for li element  So it will be something like this   ol       counter-reset  foo     default display list-item       ol  gt  li       counter-increment  foo      display  table     instead of table-row       ol  gt  li  before       content  counter foo           display  table-cell      text-align  right      So now we can use margins for spacing between li s

User · Answer

I had this same issue and started using user123444555621 s answer   However  I also needed to add padding and a border to each li  which that solution doesn t allow because each li is a table-row    First  we use a counter to replicate the ol s numbers   We then set display  table  on each li and display  table-cell on the  before to give us the indentation   Finally  the tricky part   Since we aren t using a table layout for the whole ol we need to ensure each  before is the same width  We can use the ch unit to roughly keep the width equal to the number of characters  In order to keep the widths uniform when the number of digits for the  before s differ  we can implement quantity queries  Assuming you know your lists won t be 100 items or more  you only need one quantity query rule to tell  before to change its width  but you can easily add more    x000D   x000D  ol   x000D    counter-reset  ol-num  x000D    margin  0  x000D    padding  0  x000D    x000D   x000D  ol li   x000D    counter-increment  ol-num  x000D    display  table  x000D    padding  0 2em 0 4em  x000D    border-bottom  solid 1px gray  x000D    x000D   x000D  ol li before   x000D    content  counter ol-num       x000D    display  table-cell  x000D    width  2ch     approximately two characters wide    x000D    padding-right  0 4em  x000D    text-align  right  x000D    x000D   x000D     two digits    x000D  ol li nth-last-child n 10  before  x000D  ol li nth-last-child n 10    li before   x000D    width  3ch  x000D    x000D   x000D     three digits    x000D  ol li nth-last-child n 100  before  x000D  ol li nth-last-child n 100    li before   x000D    width  4ch  x000D    x000D   lt ol gt  x000D     lt li gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Consequuntur facere veniam saepe vel cumque  nobis quisquam  Velit maiores blanditiis cum in mollitia quas facere sint harum  officia laborum  amet vero  lt  li gt  x000D     lt li gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Consequuntur facere veniam saepe vel cumque  nobis quisquam  Velit maiores blanditiis cum in mollitia quas facere sint harum  officia laborum  amet vero  lt  li gt  x000D     lt li gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Consequuntur facere veniam saepe vel cumque  nobis quisquam  Velit maiores blanditiis cum in mollitia quas facere sint harum  officia laborum  amet vero  lt  li gt  x000D     lt li gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Consequuntur facere veniam saepe vel cumque  nobis quisquam  Velit maiores blanditiis cum in mollitia quas facere sint harum  officia laborum  amet vero  lt  li gt  x000D     lt li gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Consequuntur facere veniam saepe vel cumque  nobis quisquam  Velit maiores blanditiis cum in mollitia quas facere sint harum  officia laborum  amet vero  lt  li gt  x000D     lt li gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Consequuntur facere veniam saepe vel cumque  nobis quisquam  Velit maiores blanditiis cum in mollitia quas facere sint harum  officia laborum  amet vero  lt  li gt  x000D     lt li gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Consequuntur facere veniam saepe vel cumque  nobis quisquam  Velit maiores blanditiis cum in mollitia quas facere sint harum  officia laborum  amet vero  lt  li gt  x000D     lt li gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Consequuntur facere veniam saepe vel cumque  nobis quisquam  Velit maiores blanditiis cum in mollitia quas facere sint harum  officia laborum  amet vero  lt  li gt  x000D     lt li gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Consequuntur facere veniam saepe vel cumque  nobis quisquam  Velit maiores blanditiis cum in mollitia quas facere sint harum  officia laborum  amet vero  lt  li gt  x000D     lt li gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Consequuntur facere veniam saepe vel cumque  nobis quisquam  Velit maiores blanditiis cum in mollitia quas facere sint harum  officia laborum  amet vero  lt  li gt  x000D   lt  ol gt  x000D   x000D   x000D

User · Answer

Ok  I ve gone back and figured some things out  This is a ROUGH SOLUTION to what I was proposing  but it seems to be functional   First  I made the numbers a series of unordered lists  An unordered list will normally have a disc at the beginning of each list item    so you have to set the CSS to list-style  none   Then  I made the whole list display  table-row  Here  why don t I just paste you the code instead of gabbing about it    lt html gt   lt head gt   lt link type  text css  rel  stylesheet  href  stylesheet css   gt       lt title gt Result lt  title gt   lt  head gt   lt body gt       lt div gt  lt ul gt           lt li gt 1  lt  li gt           lt li gt  lt p gt 2  lt  p gt  lt  li gt           lt li gt 10  lt  li gt           lt li gt  lt p gt 110  lt  p gt  lt  li gt           lt li gt 1000  lt  li gt       lt  ul gt       lt  div gt       lt div gt           lt p gt Some author lt  p gt           lt p gt Another author lt  p gt           lt p gt Author  10 lt  p gt           lt p gt Author  110 lt  p gt           lt p gt The one thousandth author today will win a free i-Pod     This line also wraps around so that we can see how hanging indents look  lt  p gt           lt  div gt   lt  body gt   lt  html gt     CSS   ul li  list-style  none  display  table-row  text-align  right       div   float  left  display  inline-block  margin  0 2em       This seems to align the text in the 2nd div with the numbers in the ordered list in the first div  I ve surrounded both the list and the text with a  tag so that I can just tell all divs to display as inline-blocks  This lined them up nicely   The margin is there to put a space between the period and the start of the text  Otherwise  they run right up against one another and it looks like an eyesore   My employer wanted wrapped-around text  for longer bibliograhical entries  to line up with the start of the first line  not the left-hand margin  Originally I was fidgeting with a positive margin and a negative text indent  but then I realized that when I switched to two different divs  this had the effect of making it so that the text all lined up because the left-hand margin of the div was the margin where text naturally began  Thus  all I needed was a 0 2em margin to add some space  and everything else lined up swimmingly   I hope this helps if OP was having a similar issue   I had a hard time understanding him her

[html] How to keep indent for second line in ordered lists via CSS?

Examples related to html

Examples related to css

Examples related to html-lists