在HTML中用列分隔列表？
在HTML中用列分隔列表？
提问于 2015-02-11 15:21:38
我创建了一个<ul>和<li>列表，其中包含了大量不同的信息。是否有可能在一个<li>中将不同的信息放在页面上，就像它有列一样？
就像<li>的第一个单词在页面的左边对齐一样，第二个总是在第一个1/4，第三个在一半，第四个是在3/4，对于每一个<li>。
如果是的话，这有可能吗？如果需要，我可以在这里发布我的PHP/HTML代码(尽管它是动态的)。
编辑:这是代码：http://jsfiddle.net/woz1r55e/ :)
)预先谢谢:)
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-02-11 15:34:21
在CSS中定义两个类
.inline-block
{
display: inline-block;
}
.col
{
width: 25%;
}然后在这些列中为您想要的任何内容定义容器。
<div>
<div class="inline-block col">List 1
</div>List 2<div class="inline-block col">
</div>List 3<div class="inline-block col">
</div>List 4<div class="inline-block col">
</div>
</div>Stack Overflow用户
发布于 2015-02-11 15:43:35
我想这就是你的意思：
http://jsfiddle.net/woz1r55e/1/
我添加了这个css：
ul ul ul li {
display: inline-block;
width: 25%;
}我建议给<li>一个类来使它成为内联块，或者给出第三个<ul>类并使它成为内联块
Stack Overflow用户
发布于 2015-02-11 15:29:16
为每个“列”创建不同的css类：
ul.Col1 { margin-left: 10px; }
ul.Col2 { margin-left: 210px; }
ul.Col3 { margin-left: 410px; }
<ul class="Col1">
...
</ul>
etc...页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28457961
复制相关文章
相似问题
腾讯云开发者
