Home > Article > Web Front-end > LI vertical arrangement problem_html/css_WEB-ITnose
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
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;})}