这个效果怎么弄？_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

这个效果怎么弄？_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:32 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style>.overdiv{width:920px;overflow:hidden;background-color:#fff;font-size:12px;border:1px solid #ccc;}.overdiv ul{list-style:none;width:920px;margin:0;padding:0;}.overdiv li{width:270px;height:18px;margin-right:10px;padding-top:10px;padding-left:12px;line-height:15px;overflow:hidden;}</style></head><body><div class="overdiv"><ul id="aki"><li>1.AAAAAAAA</li><li>2.BBBBBBBB</li><li>3.CCCCCCCC</li><li>4.DDDDDDDD</li><li>5.EEEEEEEE</li><li>6.FFFFFFFF</li><li>7.GGGGGGGG</li><li>8.HHHHHHHH</li><li>9.KKKKKKKK</li></ul></div></body></html>

效果:

1.AAAAAAAA  4.DDDDDDDD 7.GGGGGGGG

2.BBBBBBBB  5.EEEEEEEE 8.HHHHHHHH

3.CCCCCCCC  6.FFFFFFFF 9.KKKKKKKK

回复讨论(解决方案)

li加上float:left;

改成

1.AAAAAAAA

2.BBBBBBBB

3.CCCCCCCC

4.DDDDDDDD

5.EEEEEEEE

6.FFFFFFFF

7.GGGGGGGG

8.HHHHHHHH

9.KKKKKKKK

用表格比较方便

改成

1.AAAAAAAA

2.BBBBBBBB

3.CCCCCCCC

4.……

++++++1

改成

1.AAAAAAAA

2.BBBBBBBB

3.CCCCCCCC

4.……

这样把程序写死了，做循环怎么写？

所以采用我的方法，只在li设float:left; 加上你原来设置的宽度这样就会3个成1行第4个因为没位置了就会自动换到第二行如此重复，其他代码可以不去动

汗仔细看了你是要纵列！！！我想想

如果是想用一个ul来实现上面的话你可以改变里面的内容，li里面的内容比如这样：

1.AAAAAAAA

4.DDDDDDDD

7.GGGGGGGG

2.BBBBBBBB

5.EEEEEEEE

8.HHHHHHHH

3.CCCCCCCC

6.FFFFFFFF

9.KKKKKKKK

然后设置他的宽度，宽度不够的时候他会自动换行的。当然这样写是写死了的。如果要是导航栏那一类可以写死了的话，是可以这样写的

这个有点难。

i%3相同即可。但是2楼那个更好点，只是标签那个啥，滥用。

1....

2....

3....

如果是想用一个ul来实现上面的话你可以改变里面的内容，li里面的内容比如这样：

1.AAAAAAAA

4.DDDDDDDD

7.GGGGGGGG

2.BBBBBBBB

5.EEEEEEEE

8.HHHHHHHH

3.CCCCCCCC

6.……

如果是想用一个ul来实现上面的话你可以改变里面的内容，li里面的内容比如这样：

1.AAAAAAAA

4.DDDDDDDD

7.GGGGGGGG

2.BBBBBBBB

5.EEEEEEEE

8.HHHHHHHH

3.CCCCCCCC

6.F……

这个数据是循环读出来的。

如果是想用一个ul来实现上面的话你可以改变里面的内容，li里面的内容比如这样：

1.AAAAAAAA

4.DDDDDDDD

7.GGGGGGGG

2.BBBBBBBB

5.EEEEEEEE

8.HHHHHHHH

3.CCCCCCCC

6.F……

不是导航栏是一个列表哦

改成横排
要不就写死宽度，固定几列。
要不很难写，只能js动态控制

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

纵排
<script></script>
<script> <br /> $(function(){ <br /> $main_li = $(".main>ul>li"); <br /> for(i=0; i<$main_li.length; i++) { <br /> if(i%3 == 0) { <br /> $main_li.eq(i).css({"left":(i/3)*200 +"px", "top":"0px"}); <br /> } <br /> if(i%3 == 1) { <br /> $main_li.eq(i).css({"left":((i-1)/3)*200 +"px", "top":"30px"}); <br /> } <br /> if(i%3 == 2) { <br /> $main_li.eq(i).css({"left":((i-2)/3)*200 +"px", "top":"60px"}); <br /> } <br /> } <br /> }) <br /> </script>