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!
You can use CSS to select a range; in this case, you want list items 1-9:
Then adjust margins on those first items appropriately:
See it in action here: http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/
I had this same issue and started using user123444555621's answer. However, I also needed to add
padding
and aborder
to eachli
, which that solution doesn't allow because eachli
is atable-row
.First, we use a
counter
to replicate theol
's numbers.We then set
display: table;
on eachli
anddisplay: 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 thech
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.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 (
Then, I made the whole list display: table-row. Here, why don't I just paste you the code instead of gabbing about it?
CSS:
}
}
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.
I'm quite fond of this solution myself:
The ol, ul lists will work if you want you can also use a table with border: none in the css.
You can set the margin and padding of either an
ol
orul
in CSS