Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

CSS List Styling question

I have an unordered list item that is two lines and the second line begins directly under the bullet, can anyone please tell me how to have the second line indented to match the first line so that it doesn't begin under the bullet?

Any help is greatly appreciated! :)

7 Answers

Well, there are two options...

Do you want it to have it's own bullet? If so, put the second line in it's own li tag.

Do you want it to just be under the first line and not have it's own bullet? In that case, add both lines to the li tag but add a br tag to where the line break should go.

indented im going to asume that you want this

1 i am the first and the greatest 
     1a i am the child of the first but still the greatest 
2 i am the second 
  2a i am the first child of the second 
  2b i am the second child of the second

i cant remember exactly but i belive you do it like this

<ul>
    <li>i am the first <---- note i left the first li tag open
     <li> i am the child of the first </li></li><------- i am now closing both li tags 
</ul>

i belvie thats how you do it you basically place the indented or child list item inside of the paretns li tags

let me see if i can grab you a w3 doc on this

damnit the small width broke up the layout

my apoligies you place a new ul inside the li heres the markup from w3 schools yeah they suck but it gets the job done

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_lists2

kyle rees - W3Schools is not affliated with the W3C in any way and are using it's trademark without it's permissions. You can read more about this over at W3Fools

Instead I'd suggest you check out htmldog as reference source and codepen as a playground to try it out.

i know i know ive read it all and ive apoligised in that post but i stand by my statement it gets the job done infact we both had the same discussion not 2 weeks ago and its bad what there doing but if they have a piece of code that works as a good example im gonna use it also

kudos to whoever restyled my forum thread for me and re structured it

kyle rees - Whatever resources you choose to use are fine as you are clearly an informed consumer.

I just think no one should give a w3schools link to a newbie without a disclaimer.

When linking to resources for newbies's I always try to find another resource to link to instead, so if I can find an article on http://www.htmldog.com/ or http://learn.shayhowe.com/html-css/, it will generally be higher quality than what you find on w3schools on the same topic.

Now if those sites don't have an article on the topic you are looking at, then maybe you have to link to a w3schools article.

come to mention it does treehouse have any plans to include .... i guess youd call them wikis on html and the like