显示方式 <li> 项目从上到下不是从左到右？
[英]How to display <li> items from top to bottom not from left to right?
问题描述
I have a list items which I am mapping on <ul> <li> . 
我有一个要映射在<ul> <li>上的列表项。
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
<li>Item8</li>
<li>Item9</li>
<li>Item10</li>
<li>Item11</li>
</ul>
It display the items on the page like from left to right: 它从左到右显示页面上的项目：
Item1 Item2 Item3 Item4 Item5
Item6 Item7 Item8 Item9 Item10
Item11
I want to display them from top to bottom like 我想像从上到下显示它们
Item1 Item4 Item7 Item10
Item2 Item5 Item8 Item11
Item3 Item6 Item9
How can I display them from top to bottom? 如何从上至下显示它们？
3 个解决方案
解决方案1
0 2012-06-14 12:26:20
int count = 0;
<ul style="display:inline" >
if(count < items.length)
{
print("<li>");
print("<ul>");
for(int a = 1 ; count < items.length && a <= 3 , count++ , a++)
{
print("<li>" + items[count].Name + "</li>");
}
print("</ul>");
print("</li>");
}
</ul>
May this pseudocode help you. 希望此伪代码对您有所帮助。
解决方案2
0 2012-06-14 12:46:44
you could do this with just HTML and some simple CSS, but you'd have to make separate lists for each set of items you wanted separted by column: 您可以只用HTML和一些简单的CSS来做到这一点，但是您必须为要按列分开的每组项目分别创建列表：
<style>
ul {
margin-top:0px;
margin-left:0px;
float:left;
}
</style>
<html>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
<ul>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
</html>
解决方案3
0 2012-06-15 14:51:24
Unless you have to support IE < 10 use CSS3 columns: 除非必须支持IE <10，否则请使用CSS3列：
https://developer.mozilla.org/en/CSS3_Columns https://developer.mozilla.org/en/CSS3_Columns
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.