html - 如何让固定高度的一个UL的列表项显示为列？

Question

比如我有这样一个列表:

1
2
3
4
5
6
7
8

我希望它看起来像

1 5
2 6
3 7 
4 8

那么，如何让它在没有任何 javascript 的情况下工作呢？

我有这样一段代码:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>

和

ul{
    height:200px;
}

而且我还需要IE8和IE9支持的代码

更新:

在我看来，我明白了。看起来有点奇怪，但无论如何。

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

和 CSS

ul{
  border:1px solid;
  position:relative;
  height:100px;
}
li{
  height:20px;
}
li:nth-child(4)~li{
  left:100px;
  top:-80px;
  position:relative;  
}

Answer 1

您需要的是 CSS3 列相关属性，例如 column-count 等。我做了一个example在 jsFiddle 上。我对此了解不多，所以我通过精确计算高度来获得结果，但我认为你可以用自己的方式得到它。

还有一个 reference可能会有帮助。

HTML代码:

<div class="newspaper">
    <div class="unit">1</div>
    <div class="unit">2</div>
    <div class="unit">3</div>
    <div class="unit">4</div>
    <div class="unit">5</div>
    <div class="unit">6</div>
</div>

CSS 代码:

.newspaper {
    -moz-column-count:3;
    /* Firefox */
    -webkit-column-count:3;
    /* Safari and Chrome */
    column-count:3;
    height: 300px;
}
.unit {
    height:50px;
    width:100%;
    border:1px solid gray;
}

注意:Internet Explorer 9 及更早版本不支持列数属性。