- 1.AAAAAAAA
- 2.BBBBBBBB
- 3.CCCCCCCC 4.DDDDDDDD
- 5.EEEEEEEE
- 6.FFFFFFFF
- 7.GGGGGGGG
- 9.IIIIIIIII
ホームページ >ウェブフロントエンド >htmlチュートリアル >この効果を達成するにはどうすればよいでしょうか? _html/css_WEB-ITnose
この効果を達成するにはどうすればよいでしょうか? _html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-21 09:32:561135ブラウズ
<!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; を設定し、最初に設定した幅を追加します。これにより、スペースがないため、4 番目の行が自動的に 2 行目に移動されます。繰り返します。他のコードはそのままにしておいても構いません
カーンは注意深く見て、それらを列にリストしたいと思います。 ！ ！考えさせてください
上記を実装するために ul を使用したい場合は、li の内容を次のように変更できます。
- 1.AAAAAAAAA li>4.DDDDDDDD 7.GGGGGGGG
- li>8.HHHHHHHH
- 3.CCCCCCC の場合、自動的に行を折り返します。もちろん、このように書くのは簡単です。ナビゲーションバーが死ぬほど書けるならこんな感じで書けます
これはちょっと難しいです。
i%3 も同じです。でも、2 階の方が良いです。ラベルだけで、虐待的です。
- 1....
- 3....
- ....
上記を実装する場合は、li の内容を次のように変更します。
- 1.AAAAAAAAA
- 4.DDDDDDDD
- 2.BBBBBBBB
- 5.EEEEEEEE
- 8.HHHHHHH
- 6.……
場合上記を ul で実装するには、li 内のコンテンツを次のように変更します。
- 1.AAAAAAAAA
- 4.DDDDDDDD
- 7.GGGGGGGG
- 5.EEEEEEEE
- 1.AAAAAAAAA
- 4.DDDDDDDD li>
- 7.GGGGGG
- 5.EEEEEEEE
- ;/li> ;
- 3.CCCCCCCC
- 6.F...
これはナビゲーションバーではなく、リストです
または単に次のように書きます幅を調整し、いくつかの列を修正します。
そうしないと書くのが難しくなり、jsで動的に制御するしかありません
纵排
ボディ{背景:#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;}
6.F……
このデータはループで読み出されます。
上記を実現するために ul を使用したい場合は、li の内容を次のように変更できます。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。