HTML UL CSS Border Style

Question

I have a little question regarding html lists and CSS. I want to have a list (whit sublist) that looks like this (view the result by running the code at http://htmledit.squarefree.com/ ):

<style type="text/css"> ul { border: 0px solid #90bade; } li { list-style-type:none; border: 1px solid black; } .lv1 { margin:0px 0px 0px 10px; } </style> <ul> <li>One</li> <li class ="lv1">Sub</li> <li>One</li> </ul> 

But I would prefer to use the html code for this list:

 <ul> <li>One <ul> <li>Sub</li> </ul> </li> <li>One</li> </ul> 

Unfortunately, I can't figure out how to style the second list with CSS so that it looks like the first. Does anyone know if this is possible only using CSS or do I need to make one big list and use classes (like in the first list) to get the desired layout?

Thank you in advance

Answer 1

You can wrap text with a div and specify the div desired border. Add a style for the div to your CSS and remove the border from your li . This should do the trick. However, I do not see a possible resolution without editing HTML.

 .border { border: 1px solid black; } <ul> <li> <div class="border">One</div> <ul> <li><div class="border">Sub</div></li> </ul> </li> <li><div class="border">One</div></li> </ul> 

Answer 2

As Elwhis said, you can add a <div> to the <li> but you can avoid the "class" as follows:

  <style type="text/css"> ul { border: 0px solid #90bade; } li { list-style-type:none; border: 0px solid black; } ul li div { border:1px solid black } </style> <ul> <li><div>One</div> <ul> <li><div>Sub</div></li> </ul> </li> <li><div>One</div></li> </ul> 

Answer 3

Replace list style type: none;
with position list: inside;

 li { list-style-position:inside; border: 1px solid black; }