这个效果怎么弄?_html/css_WEB-ITnose
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
- 1....
- 2....
- 3....
- 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>
- 1.AAAAAAAA
- 2.BBBBBBBB
- 3.CCCCCCCC
- 4.DDDDDDDD
- 5.EEEEEEEE
- 6.FFFFFFFF
- 7.GGGGGGGG
- 8.HHHHHHHH
- 9.IIIIIIII
so easy上面再完善下,给li的样式加个防止溢出的样式,改后
.main li{position:absolute; width:180px; padding:0px 10px; overflow:hidden;}
然后设置他的宽度,宽度不够的时候他会自动换行的。当然这样写是写死了的。如果要是导航栏那一类可以写死了的话,是可以这样写的
这个有点难。
i%3相同即可。但是2楼那个更好点,只是标签那个啥,滥用。
....
如果是想用一个ul来实现上面的话 你可以改变里面的内容,li里面的内容比如这样:

인기 기사

인기 기사

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?
