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 に答える