CODEWITHSUNDEEP
htmlcsshtml-lists
Naugrim
Naugrim

Reputation: 102

HTML UL CSS Border style

I have a little question concerning html-lists and CSS. I want to have a list (whit sublist) that looks like this (view the result by coping the code into 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 html-code like this for the list:

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

Unfortunately I cannot figure out, how to style the second list whit CSS in order to make it look like the first one. Does anyone know if it’s possible by only using CSS or do I have to make one big list and use classes (like in the first list) to get the desired layout?

Thanks in advance

Upvotes: 5

Views: 51190

Answers (3)

Vladimir Chizhov
Vladimir Chizhov

Reputation: 3

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

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

Upvotes: 0

Fabiano Shark
Fabiano Shark

Reputation: 384

As Elwhis said, what you can do is add the <div> in <li> but you can avoid "class" like this:

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

Upvotes: 0

Elwhis
Elwhis

Reputation: 1261

You can wrap the text with a div and give the div the desired border. Add the style for the div to your CSS and remove the border from your li. That should do the trick. I don't see a possible sollution without editing the HTML, though.

.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>

Upvotes: 5

Related Questions