div после того, как последний li слился в нем в т.е.

Question

У меня есть следующий xhtml, я должен добавить div после последнего li в ul. Каждый браузер отображает список правильно, кроме 6

<ul>

  <li><div class="content">some div here</div></li>
  <li><div class="content">some div here</div></li>
  <li><div class="content">some div here</div></li>
  <li>some div here</li>
  <div class="more">add nore</div> 

</ul>

но div, определенный в конце концов, сливается с последним li и становится его частью. его css следующий

ul{ border:1px solid #C9C9C9; list-style:none;  }
ul li{ border:1px solid #C9C9C9; display:inline-block; }
ul li .content{ border:0px solid; float:left; }
.more{ border:1px solid #D7D7D7; text-align:center; width:600px;}

Answer 1

Закрыть <ul>:

<ul>
    <li><div class="content">some div here</div></li>
    <li><div class="content">some div here</div></li>
    <li><div class="content">some div here</div></li>
    <li>some div here</li>
 </ul>
    <div class="more">add nore</div>

Вы не можете иметь элемент, не являющийся <li>, в качестве дочернего элемента <ul>.

Answer 2

Попробуйте добавить clear:both и overflow:hidden к div css:

.more{
   border:1px solid #D7D7D7;
   text-align:center;
   width:600px;
   clear:both;
   overflow:hidden;
 }