Проблема с плавающими списками CSS - один длинный элемент, «заполняющий две строки»

Question

На прилагаемом скриншоте находится всплывающий список с одним элементом с длинным описанием, который перемещает первый элемент на следующей строке на одну позицию вправо.Я не хочу этого.

Есть ли какая-нибудь директива / компоновка trick / css, которая подтолкнет следующую строку ниже, чтобы можно было заполнить строку и все элементы были бы в одной строке?

Я могу сгенерировать clear: left; для каждого (n / 3) + 1-го ребенка, но я думаю, что есть какое-то чистое решение CSS, но сегодня я просто не могу его найти.

I 'Я устал и немного медленный сегодня.Спасибо.

Редактировать: Я тоже, очевидно, сегодня не имеет смысла.Вот что я хочу: li с фотографией людей, сидящих на скамейке внизу, должно быть прямо под первым, но это не так, потому что первый элемент имеет слишком длинный текст.

СКРИНШОТ:

HTML:

<ul id="photos"> 
<li> 
  <a href=".."> 
    <img src=".." alt="" height="160" width="160"/><br> 
    Vianočný koncert - Zohor 2009
    <span class="nr">61</span> 
  </a></li> 
<li> 
  <a href=".."> 
    <img src=".." alt="" height="160" width="160"/><br> 
    Koleda 2009
    <span class="nr">1</span> 
  </a></li> 
<li> 
  <a href=".."> 
    <img src=".." alt="Advent 2009" height="160" width="160"/><br> 
    Čejkovice 2009
    <span class="nr">15</span> 
  </a></li> 
<li> 
  <a href=".."> 
    <img src=".." alt="" height="160" width="160"/><br> 
    Marianka 2009
    <span class="nr">6</span> 
  </a></li> 
</ul>

CSS:

#photos li {
  display:block;
  float:left;
  position:relative;
}
#photos li a {
  text-decoration:none;
  display:block;
  padding:10px 10px 20px;
  cursor:pointer;
  width:160px;
  text-align:center;
}
#photos li a img {
  cursor:pointer;
  display:inline-block;
}

Answer 1

Как предлагает Phrogz, попробуйте inline-block вместо float. IE 6/7 не поддерживает его напрямую, но вы можете подделать его простым взломом.

<style>
ul { list-style-type: none;}
li { display: inline-block;}
a { display: inline-block; width: 180px; padding:10px 10px 20px; text-decoration: none; text-align: center; }
</style>
<!--[if lt IE 8]>
<style>
li { zoom:1; *display:inline;}
</style>
<![endif]-->

Он не использует ту же разметку, что и вы, но вот пример, который я сделал для аналогичного вопроса.