如何使固定高度的一个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列的相对属性，如列计数等。我在jsFiddle上做了一个例子。我对此了解不多，所以我通过精确计算身高来达到这个结果，但我认为你可以用自己的方式得到。

参考资料可能会有所帮助。

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及早期版本不支持列计数属性。

Answer 2

我会使用表格而不是列表

Answer 3

你可以像一样完成

HTML

<ul>
    <li class="column1"><a href="#">1</a></li>
    <li class="column1"><a href="#">2</a></li>
    <li class="column1"><a href="#">3</a></li>
    <li class="column1"><a href="#">4</a></li>
    <li class="column1"><a href="#">5</a></li>
    <li class="column2 reset"><a href="#">5</a></li>
    <li class="column2"><a href="#">6</a></li>
    <li class="column2"><a href="#">7</a></li>
    <li class="column2"><a href="#">8</a></li>
    <li class="column2"><a href="#">9</a></li>
    <li class="column3 reset"><a href="#">10</a></li>
    <li class="column3"><a href="#">11</a></li>
    <li class="column3"><a href="#">12</a></li>
    <li class="column3"><a href="#">13</a></li>
    <li class="column3"><a href="#">14</a></li>
    <li class="column3"><a href="#">15</a></li>
</ul>

并检查下面的css

ul
{
    margin: 0 0 1em 2em;
    padding: 0;
    list-style-type: none;
 }
  ul li
  {

   line-height: 1.2em;

  margin: 0;
  padding: 0;
}

* html ul li
{
                        position: relative;
}

ul li.column1 { margin-left: 0em; }
ul li.column2 { margin-left: 10em; }
ul li.column3 { margin-left: 20em; }

li.reset
{
       margin-top: -6em;
}

ul li a
{
       display: block;
       width: 7em;
       text-decoration: none;
 }
 ul li a:hover
 {
       color: #FFF; 
       background-color: #A52A2A;
 }

检查一下这个小提琴：

http://jsfiddle.net/9RcVr/