[英]How to make list items of one UL with fixed height be displayed as columns?
For example, i have such a list: 例如,我有这样一个列表:
1
2
3
4
5
6
7
8
and i want it to look like 我希望它看起来像
1 5
2 6
3 7
4 8
So, how to make it work without any javascript? 那么,如何使其在没有任何JavaScript的情况下起作用?
I have such a code: 我有这样的代码:
<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>
And 和
ul{
height:200px;
}
And i also need the code to be supported by IE8 and IE9 我还需要IE8和IE9支持的代码
Update: 更新:
It seems to me that i got it. 在我看来,我明白了。 It's looking a little bit weird but anyway.
看起来有点不可思议,但无论如何。
<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>
And CSS 和CSS
ul{
border:1px solid;
position:relative;
height:100px;
}
li{
height:20px;
}
li:nth-child(4)~li{
left:100px;
top:-80px;
position:relative;
}
what you need is CSS3 column relative attributes, like column-count etc. I make a example on jsFiddle. 您需要的是CSS3列的相对属性,例如column-count等。我在jsFiddle上举一个示例 。 I don't know much about this, so I achieve the result by calculate height precisely, but I think you can get it in your own way.
我对此了解不多,所以我可以通过精确计算高度来获得结果,但是我认为您可以用自己的方式获得它。
And a reference might be helpful. 并且参考可能会有所帮助。
HTML code: 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 code: 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;
}
Note: Internet Explorer 9, and earlier versions, does not support the column-count property. 注意: Internet Explorer 9和更早的版本不支持column-count属性。
我将使用表格而不是列表
you can do it like 你可以做到
HTML 的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>
And check below css 并检查下面的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;
}
And check this fiddle: 并检查这个小提琴:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.