こんにちは、
下記のliを3列づつ表示したいのですが、
どのようにすればよいでしょうか?
(2列とかはあるのですが・・・tableにすべき?)
<ul id="leftlist1">
<li><a href="#">a1</a></li>
<li><a href="#">a2</a></li>
<li><a href="#">a3</a></li>
</ul>
<ul id="leftlist2">
<li><a href="#">b1</a></li>
<li><a href="#">b2</a></li>
<li><a href="#">b3</a></li>
</ul>
<ul id="leftlist3">
<li><a href="#">c1</a></li>
<li><a href="#">c2</a></li>
<li><a href="#">c3</a></li>
</ul>
No.1ベストアンサー
- 回答日時:
ul{display:inline-block;width:30%;margin:0;padding-left:2%;}
必要なら、他のulと区別するために、全体をdivで囲んで文書構造を補完しておく
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
[例]
<div class="nav"><!-- ここはナビゲーションブロックだよ -->
<ul id="leftlist1">
<li><a href="#">a1</a></li>
<li><a href="#">a2</a></li>
<li><a href="#">a3</a></li>
</ul>
<ul id="leftlist2">
<li><a href="#">b1</a></li>
<li><a href="#">b2</a></li>
<li><a href="#">b3</a></li>
</ul>
<ul id="leftlist3">
<li><a href="#">c1</a></li>
<li><a href="#">c2</a></li>
<li><a href="#">c3</a></li>
</ul>
</div>
div.nav{text-align:center;position:relative;width:80%;margin:0 auto;}
div.nav ul{text-align:left;display:inline-block;width:30%;margin:0;padding-left:2%;}
また、幅の狭いディスプレイでは、2列、3列にしてスマホなどにも対応させるなら
div.nav ul li{min-width:200px;}
とかにしておけば、狭いディスプレイでは下に下がります。
display:inline-blockは、IE6,7は対応していませんので、floatで配置する場合もあります。
いまはあまり必要ないかも・・サイトの対象で判断してください。
★無用なidやclassをつけないようにしましょう。先でデザインを変えるとき悲劇が訪れます。
あくまで「文書構造を補完するメタです」。またidではなくclassを使用するように!!!。基本的にリンクのターゲットになるときやjavascriptのターゲットになるとき以外は使う必要はないでしょう。一意セレクタ#は詳細度が高く不便です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS インラインブロックの中のテキストを上下中央に合わせたい 1 2022/12/24 17:46
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- その他(IT・Webサービス) html cssについて 3 2023/05/13 12:48
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【CSS】メニュー上部に固定させ...
-
疑似クラス :activeが効きません
-
html/cssの、navを2段にする...
-
<li><h2>カテゴリ名<h2></li>で...
-
ホームページビルダーで同じ行...
-
cssでタグ検索のデザインをして...
-
html <ul></ul>の並びで一行空...
-
スタイルシートが全く理解でき...
-
<ul>と<li>リストマークを消す...
-
隣接セレクタの適用範囲について。
-
リストの数字のフォントサイズ...
-
CSS3グラデーションで、右端だ...
-
正規表記について「除く」の表...
-
<li>リストで横メニューを作るわけ
-
画像はDIVタグとPタグの両方で...
-
htmlで行頭を下げる方法
-
IEで<td>の全角を有効にする方法
-
カルーセルスライダー「slick.j...
-
( html) 位置指定方法を教えて...
-
文法チェックの<A>と</A>の間が...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
divタグ内のコンテンツが重なっ...
-
<ul><li></li></ul>にするメリ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
リンク文字同士の間隔を開ける...
-
<ul>~</ul>が二つ続くと間に改...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
display:table;を多段表示させたい
-
CSS質問:大手サイトを見ると何...
-
ボタンを横に並べて表示させる方法
-
html <li>の中の文字一部に色を...
-
html <ul></ul>の並びで一行空...
-
Tableの1セル内に画像・テキス...
おすすめ情報