如何使一個具有固定高度的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一個example。我對這一點不太瞭解，所以我通過精確計算身高來達到結果，但我認爲你可以用自己的方式得到結果。

和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，和更早的版本，不支持的列數屬性。

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/