CODEWITHSUNDEEP
htmlcss
user3688792
user3688792

Reputation: 33

Styling CSS Unordered Lists

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

Upvotes: 2

Views: 129

Answers (5)

Jason
Jason

Reputation: 1079

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.

Upvotes: 0

gwin003
gwin003

Reputation: 7891

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/

Upvotes: 2

durbnpoisn
durbnpoisn

Reputation: 4669

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.

Upvotes: 0

willlma
willlma

Reputation: 7533

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

or 

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

Upvotes: 0

Mocolicious
Mocolicious

Reputation: 325

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;}

Upvotes: 0

Related Questions