1

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

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

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/

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

怎么了 ？有没有简单的解决方法，或者我应该完全以另一种方式来解决。

4

1 回答 1

6

给你的列表项一个顶部垂直对齐：

li { vertical-align:top; }

于 2012-12-20T00:10:39.233 回答