寻找一种方法来设置列表的样式,使其看起来像一个网格。
<div class="name">
<ul>
<li>1</li>
<li>Text</li>
<li>2</li>
<li>Text</li>
<li>3</li>
<li>Text</li>
...
<ul>
在我的 css 中我已经使用了:
.name {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
现在每 <li>
元素位于之前的元素之下。
1 3
Text Text
2 4
Text ....
我想实现以下目标:每 2 次 <li>
将与之前的配对:
1 Text 4 Text 7 Text
2 Text 5 Text 8 Text
3 Text 6 Text 9 Text
如何实现? PS:如果可能,不向 <ul>
添加类或 <li>
元素。
最佳答案
我更改了你的代码:
在 jsfiddle 上查看
我为此使用了:nth-of-type
选择器!但我建议你使用 table
标签
CSS:
*{
font-family:"Trebuchet MS", Helvetica, sans-serif;
}
.name{
position:relative;
width:90%;
margin:0;
margin-left:5%;
background:#e7e7e7;
padding:0;
}
div.name li{
color:#2E99DB;
width:2%;
display:inline-block;
}
div.name li:nth-of-type(even){
color:#000;
width:21%;
display:inline-block;
}
HTML:
<div class="name">
<ul>
<li>1</li>
<li>Text</li>
<li>2</li>
<li>Text</li>
<li>3</li>
<li>Text</li>
<li>4</li>
<li>Text</li>
<li>5</li>
<li>Text</li>
<li>6</li>
<li>Text</li>
<li>7</li>
<li>Text</li>
<ul>
</div>
注意:使用更精确的宽度比例......
关于html - CSS:带有成对 <li> 元素的 3 列 <ul> 布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24020615/