Styling CSS Unordered Lists

Question

Is it possible to style an unordered list so that the second line and the ones after that are indented the same as the first line of the list item?

Please see the example for exactly what I mean

O----First Line
     --SECOND LINE SHOULD START HERE
     --EVERY OTHER LINE SHOULD BE LIKE THIS ALSO

You can nest a ul inside of another ul to get what you want. — gwin003
– gwin003, Commented Jul 31, 2014 at 18:19
When you mention those indented lines past the first, are those sub-bullets or are they wrapped lines of text? — Jason
– Jason, Commented Jul 31, 2014 at 18:40

gwin003 · Accepted Answer · 2014-07-31 18:33:44Z

2

Just to supplement my comment, here is a jsfiddle demonstrating what I mentioned. http://jsfiddle.net/R5ptL/

<ul>
   <li>Parent</li>
   <ul>
       <li>Child1</li>
       <li>Child2</li>
       <li>Child3</li>
   </ul>
   <li>Parent2</li>
</ul>

And if you want them to be the same style...

ul, li {
    list-style-type: circle; /* or whatever style you choose */
}

EDIT: How to do this with multiple unordered lists AND CSS only: http://jsfiddle.net/R5ptL/1/

edited Jul 31, 2014 at 18:33

answered Jul 31, 2014 at 18:22

gwin003

8,1526 gold badges41 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jason Over a year ago

This is not what the OP asked. He specifically wanted the multiple lines within a single list item to have indentation on every line after the first one.

misterManSam Over a year ago

@Jason - That is one way to interpret the question. Semantically, a nested list like this would be more suitable if the first item is a parent of the subsequent items.

gwin003 Over a year ago

@Jason The OP did not state he only wanted there to be one list. Is looks like he is building a heirarchy and this is the correct way to do so.

misterManSam Over a year ago

@gwin003 - The parent closing </li> should wrap around its child <ul>

gwin003 Over a year ago

@misterManSam Hm, I've never done it that way. Checking with my fiddle, it actually produces the same result both ways.

|

Mocolicious · Accepted Answer · 2014-07-31 18:21:23Z

0

use the css first-child selector to apply the indent to every line other than the first. ex:

ul li:first-child{margin:0px;}
ul li{margin:5px;}

answered Jul 31, 2014 at 18:21

Mocolicious

3252 silver badges12 bronze badges

Comments

willlma · Accepted Answer · 2014-07-31 18:21:47Z

0

li:not(first-child) {
  margin-left: 20px;
}

or

li {
  margin-left: 20px;
}
li:first-child {
  margin-left: 0;
}

answered Jul 31, 2014 at 18:21

willlma

7,5532 gold badges33 silver badges47 bronze badges

1 Comment

Kelderic Over a year ago

Couple things: There's no explanation here as to why this would work, it's just code. Second, while it would work, it's dependent on knowing the exact width that the indent is. It would probably be better to embed a second level of ul li to move the sub items over automatically.

durbnpoisn · Accepted Answer · 2014-07-31 18:21:51Z

0

It's like this: (HTML solution, not CSS)

<ul>
<li> first item </li>
<li> second item
<ul>
<li>first item of second list</li>
<li>second</li>
</ul>
</li>
<li> continue primary list </li>
</ul>

In short, you nest a complete new UL inside the primary UL.

answered Jul 31, 2014 at 18:21

durbnpoisn

4,6792 gold badges19 silver badges30 bronze badges

Comments

Jason · Accepted Answer · 2014-07-31 18:41:01Z

0

My first answer was apparently incorrect after further testing. This should work though:

ul li {
    text-indent:-10px;
    margin-left:10px;
}

NOTE: This answer runs under the assumption that every line other than the first is simply wrapped text. If those other lines are meant to be sub-points, go with gwin003's answer.

answered Jul 31, 2014 at 18:41

Jason

1,07911 silver badges24 bronze badges

Collectives™ on Stack Overflow

Styling CSS Unordered Lists

5 Answers 5

7 Comments

Comments

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

1 Comment

Comments

Comments

Related