html - li 元素在 sibling 有不同数量的文本行时下推

Question

我正在尝试制定一个简单的时间表。

它工作正常，直到列表元素的内容跨越不同的行数。如果列表中的所有兄弟项都具有相同数量的文本行，则它们会正确显示，否则某些会被下推。

CSS:

ul {
  display: table;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.timetable {
  width: 600px;
  float: right;
  border-left: 2px solid #999;
  border-right: 2px solid #999;
}
.timetable li {
  border-bottom: 2px solid #999;
}
.date {
  text-align: center;
  line-height: 30px;
}
.multievent li {
  display: inline-block;
  width: 110px;
  border: none;
  border-right: 2px solid #999;
}

HTML:

  <ul class="timetable day2">
    <li>
      <ul class="multievent">
        <li class='suite1 firstchild' style="height: 28px;">one line</li>
        <li class='suite2' style="height: 28px;">one line</li>
        <li class='suite3' style="height: 28px;">one line</li>
        <li class="suite4" style="height: 28px;">one line</li>
      </ul>
    </li>
    <li>
      <ul class="multievent">
        <li class='suite1' style="height: 58px;">two line  asdasdf two line</li>
        <li class='suite2' style="height: 58px;">two line  asdfasdftwo line</li>
        <li class='suite3' style="height: 58px;">one line</li>
        <li class="suite4" style="height: 58px;">two line asdfasdf two line</li>
        <li class="ball noborder" style="height: 58px;">two line asdfasdf two line</li>
      </ul>
    </li>
    <li>
      <ul class="multievent">
        <li class='suite1' style="height: 58px;">two line  asdasdf two line</li>
        <li class='suite2' style="height: 58px;">three line  asdfasdasdff three line</li>
        <li class='suite3' style="height: 58px;">two line  asdfasdftwo line</li>
        <li class="suite4" style="height: 58px;">two line asdfasdf two line</li>
        <li class="ball noborder" style="height: 58px;">two line asdfasdf two line</li>
      </ul>
    </li>
    <li>
      <ul class="multievent">
        <li class='suite1' style="height: 58px;">two line  asdasdf two line</li>
        <li class='suite2' style="height: 58px;">two line  asdff two line</li>
        <li class='suite3' style="height: 58px;">two line  asdfasdftwo line</li>
        <li class="suite4" style="height: 58px;">two line asdfasdf two line</li>
        <li class="ball noborder" style="height: 58px;">two line asdfasdf two line</li>
      </ul>
    </li>
    </ul>

例如看这里: http://jsfiddle.net/762LA/1/

当所有框正确排列时，您会看到内容跨越相同的行数。

发生了什么事？有没有简单的解决方法，或者我应该完全用另一种方法来解决这个问题。

Answer 1

让您的列表项顶部垂直对齐:

li { vertical-align:top; }