LI vertical arrangement problem_html/css_WEB-ITnose

  

    

    

    

    

    

  

如何让纵向排满一列自动换第二列，大虾们请执教。。。

回复讨论(解决方案)

  
• ??1 Itemone 

  
• ??2 Itemtw

  
• ??3 Itemthree 

  
• ??4 Itemfour 


• ??05 Itemfiv 


• ??06 Itemsixx


• ??7 Item777 


• ??8 Item8888 


• ??9 Item99


• ??10 Itemtttenn


• ??11 Item111e 


• ??12 Item1122 


• ??13 Item13131 


• ??14 Item1414 


• ??15 Item1555 


• ??16 Item16 


• ??17 Item17777 


• ??18 Item18 


• ??19 Item1999 


• ??20 Item122 


• ??21

Arrange horizontally first and then move to the next line when the line is full.

It is recommended to use several DIVs. Fixed height, when the queue is full, it will be queued to the second one

< ;meta http-equiv="Conten...
It realizes that the horizontal row is filled first and then the next row is rowed.

This kind of arrangement will be incompatible in FIREFOX

< style>
.divclass{width:800px;height:50px;}
.divclass ul{margin:0;wdith:800px;height:50px;}
.divclass ul li{height:20px;wdith :50px; margin: 2px 0px; float: left}

This will make it horizontal

Add a floating alignment to li, you have to calculate it carefully The distance between li and li should be less than or equal to the length of ul. If you want to arrange them neatly, it is best to add an overflow hiding and height in li. It is definitely no problem. , but is it necessary, and doesn’t it feel weird to have 10 rows on the left and 1 on the right? Since you said that the right side is filled and then the right side is arranged, that is, the entire height is fixed, and the maximum number of rows on the left can be achieved (assuming 10). First, these li are positioned uniformly with position:absolute;, and then through jquery Position i for the first 10 navigations (i=0;i<10,I ){li[i].css({top:i*line height value;left:0px;})} and then position i for the 11 li (i=10;i<20,I ){li[i].css({top:i*line height value;left:100px;})}