Question

In my HTML doc I have a nested list with style:

li {
    list-style-type:none;
    border:1px solid;
    margin:3px;
}

li li {
    list-style:none;

}


<ul>
  <li>something
    <ul>
      <li>hello</li>
      <li>there</li>
    </ul>
  </li>
</ul>

With my current CSS rule borders looks like this:

I want them to look like this, but without inserting <span> tags:

Any ideas?

Answer 1

Maybe something like that:

li {
    clear: both;
    width: 200px;
    list-style-type:none;
    border:1px solid;
    margin:3px;
}
li ul{
    float: left;
}


<ul>
  <li>something
    <ul>
      <li>hello</li>
      <li>there</li>
    </ul>
  </li>
  <li>something
    <ul>
      <li>hello</li>
      <li>there</li>
    </ul>
  </li>
</ul>

The result: