ホームページ >ウェブフロントエンド >htmlチュートリアル >この効果を達成するにはどうすればよいでしょうか? _html/css_WEB-ITnose

この効果を達成するにはどうすればよいでしょうか? _html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル: 2016-06-21 09:32:561109ブラウズ

<!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;

改成
c9ccee2e6ea535a969eb3f532ad9fe89
#block {float:left;}
531ac245ce3e4fe3d50054a55f265927

c1065f1465ff94aeb4a2b59042adc714

be52d5933c806b4f4335217049587f50
b277285397d5e23b9423e464a00b1da2
25edfb22a4f469ecb59f1190150159c61.AAAAAAAAbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c62.BBBBBBBBbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c63.CCCCCCCCbed06894275b65c1ab86501b08a632eb
16b28748ea4df4d9c2150843fecfba68
b277285397d5e23b9423e464a00b1da2
25edfb22a4f469ecb59f1190150159c64.DDDDDDDDbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c65.EEEEEEEEbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66.FFFFFFFFbed06894275b65c1ab86501b08a632eb
16b28748ea4df4d9c2150843fecfba68
b277285397d5e23b9423e464a00b1da2
25edfb22a4f469ecb59f1190150159c67.GGGGGGGGbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c68.HHHHHHHHbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c69.KKKKKKKKbed06894275b65c1ab86501b08a632eb
16b28748ea4df4d9c2150843fecfba68
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68

用表格比较方便

そこで、私の方法を使用して、li に float:left; を設定し、最初に設定した幅を追加します。これにより、スペースがないため、4 番目の行が自動的に 2 行目に移動されます。繰り返します。他のコードはそのままにしておいても構いません

カーンは注意深く見て、それらを列にリストしたいと思います。！！考えさせてください

上記を実装するために ul を使用したい場合は、li の内容を次のように変更できます。
25edfb22a4f469ecb59f1190150159c61.AAAAAAAAA bed06894275b65c1ab86501b08a632eb li>4.DDDDDDDDbed06894275b65c1ab86501b08a632eb 7.GGGGGGGGbed06894275b65c1ab86501b08a632eb
8.HHHHHHHHbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c63.CCCCCCC の場合、自動的に行を折り返します。もちろん、このように書くのは簡単です。ナビゲーションバーが死ぬほど書けるならこんな感じで書けます

これはちょっと難しいです。

i%3 も同じです。でも、2 階の方が良いです。ラベルだけで、虐待的です。

1....

3....

ff6d136ddc5fdfeffaf53ff6ee95f185

929d1f5ca49e04fdcb27f9465b944689
上記を実装する場合は、li の内容を次のように変更します。

1.AAAAAAAAA

4.DDDDDDDD

2.BBBBBBBB

5.EEEEEEEE

8.HHHHHHH

6.……
場合上記を ul で実装するには、li 内のコンテンツを次のように変更します。
1.AAAAAAAAA bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c64.DDDDDDDD < ;/li>
7.GGGGGGGG

5.EEEEEEEE

25edfb22a4f469ecb59f1190150159c61.AAAAAAAAA bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c64.DDDDDDDD 2867e861ba23559b572f230426ab14ea
25edfb22a4f469ecb59f1190150159c67.GGGGGGbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c65.EEEEEEEEbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6 ;/li> ;
25edfb22a4f469ecb59f1190150159c63.CCCCCCCC bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66.F...

これはナビゲーションバーではなく、リストです

または単に次のように書きます幅を調整し、いくつかの列を修正します。
そうしないと書くのが難しくなり、jsで動的に制御するしかありません

91659fcaa0a9594a6faa3c8d4f321cc4

97f2b6ae5f4f65bc7d15c6c9b9e8be8c
b2386ffb911b14667cb8f0f91ea547a7纵排6e916e0f7d1e588d4f442bf645aedb2f
bccb7645f733f68796caa40c903641d62cacc6d41bbb37262a98f745aa00fbf0
4ec11beb6c39d0703d1751d203c17053
$(function(){
$main_li = $(".main>ul>li");
for(i=0; i<$main_li.length; i++) {
if(i%3 == 0) {
$main_li.eq(i).css({"left":(i/3)*200 +"px", "top":"0px"});
}
if(i%3 == 1 ) {
$main_li.eq(i).css({"left":((i-1)/3)*200 +"px", "top":"30px"}); %3 == 2) {
$main_li.eq(i).css({"left":((i-2)/3)*200 +"px", "top":"60px"}); }
}
})
2cacc6d41bbb37262a98f745aa00fbf0
cdb437ef872df3303b11b84513957a19
ボディ{背景:#FFF; フォント:12px/24px、Arial、Helvetica、サンセリフ; 色:#333; マージン:0px 自動; パディング:0px;}
ul,li,h1,h2,h3,h4,h5{マージン:0px; パディング:0px; 行の高さ:24px; フォントの太さ:標準; list-style:none;}
a,a:hover{font-size:12px; 行の高さ:24px; color:#333;}
a:hover{text-decoration:underline;}
.main{width:600px; マージン:20px 自動; パディング:10px 0px; 高さ:90ピクセル; border:1px solid #ccc;}
.main ul{float:left; 表示:インライン; 幅:600ピクセル; 位置:相対;}
.main li{位置:絶対; 幅:180ピクセル; パディング:0px 10px;}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1

473a967da286a3c736825b4619e7dc30ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c61.AAAAAAAAbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c62.BBBBBBBBbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c63.CCCCCCCCbed06894275b65c1ab86501b08a632eb8e22c81817d224bf490a20f8d20d8ac94.DDDDDDDDbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c65.EEEEEEEEbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c66.FFFFFFFFbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c67.GGGGGGGGbed06894275b65c1ab86501b08a632ebbed06894275b65c1ab86501b08a632eb5e212f766f94aa12b68809fb10428889
73a6ac4ed44ffec12cee46588e518a5e

とても簡単です

上面再完善下、给li的样式加个流出防止样式、改後
.main li{position:absolute; 幅:180ピクセル; パディング:0px 10px; オーバーフロー:非表示;}

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ie6_html/css_WEB-ITnose でドロップダウンリストが表示されない次の記事：ie6_html/css_WEB-ITnose でドロップダウンリストが表示されない

続きを見る

この効果を達成するにはどうすればよいでしょうか? _html/css_WEB-ITnose

回复讨论(解决方案)

関連記事