css の float:left; を li に適用すると
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
●AAA●BBB●CCC
のような横並びにできます
<ul>
<li>AAA</li>
<li>BBB
<ul>
<li>aaa</li>
<li>bbb</li>
</ul>
</li>
<li>CCC</li>
</ul>
このように入れ子の場合
●AAA●BBB ●CCC
□aaa□bbb
のように表示されます
これを
●AAA●BBB●CCC
□aaa□bbb
のように、一段目に間を空けないで表示する
CSS の設定を教えてください
よろしく、お願いします
No.2ベストアンサー
- 回答日時:
>わかりにくかったと思いますが、aaa、bbbも
>横に表示したいと思います
いえ、それも想定して書いてありますよ。
div#contentTable ul li ul li{display:block;}/* 縦に!!横にすると次のulと重なるよ */
この行を消せばよいだけ。ulの幅が狭いのでliが縦に並ぶので最終的には
div#contentTable{line-height:2em;text-align:center;}
div#contentTable ul{margin:0;padding:0;position:relative;list-style:none;}
div#contentTable ul li{display:inline-block;width:5em;position:relative;z-index:10;}
/* 二階層目のulの位置を指定 */
div#contentTable ul li ul{width:100%;position:absolute;top:2em;left:0;} /* ★ */
div#contentTable ul li ul li{display:block;}/* ★縦に!!横にすると次のulと重なるよ */
/* ★プルダウンにするなら */
/* div#contentTable ul li ul{display:none;}
div#contentTable ul li:hover ul{display:block;}
*/
/* 分かりやすいよう着色 */
div#contentTable ul li ul li{background-color:silver;}
div#contentTable ul li{background-color:lime;}
div#contentTable ul li:hover{background-color:yellow;}
↓
div#contentTable{line-height:2em;text-align:center;}
div#contentTable ul{margin:0;padding:0;position:relative;list-style:none;}
div#contentTable ul li{display:inline-block;width:5em;position:relative;z-index:10;}
/* 二階層目のulの位置を指定 */
div#contentTable ul li ul{width:400%;position:absolute;top:2em;left:0;}
/* プルダウンにするなら */
div#contentTable ul li ul{display:none;}
div#contentTable ul li:hover ul{display:block;}
/* 分かりやすいよう着色 */
div#contentTable ul li ul li{background-color:silver;}
div#contentTable ul li{background-color:lime;}
div#contentTable ul li:hover{background-color:yellow;}
となるだけ
[参考]
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
このページで、[表示]メニューから[スタイル(シート)]を選択して、色々なスタイルを選択してみる。
ウィンドウ幅を変えたり、印刷プレビューも確認してみる。
HTMLさえ率直にシンブルに書いておけばスタイルシートでどうにでもなる。
No.1
- 回答日時:
floatじゃないでしょう(^^)
floatはかって古いIE(IE7)がdisplay:inline-block;に対応していないときの名残
<div id="contentTable">
<ul>
<li>一章</li>
<li>二章
<ul>
<li>1項</li>
<li>2項</li>
<li>3項</li>
</ul>
</li>
<li>三章
<ul>
<li>1項</li>
<li>2項</li>
<li>3項</li>
</ul>
</li>
</ul>
</div>
div#contentTable{line-height:2em;text-align:center;}
div#contentTable ul{margin:0;padding:0;position:relative;list-style:none;}
div#contentTable ul li{display:inline-block;width:5em;position:relative;z-index:10;}
/* 二階層目のulの位置を指定 */
div#contentTable ul li ul{width:100%;position:absolute;top:2em;left:0;}
div#contentTable ul li ul li{display:block;}/* 縦に!!横にすると次のulと重なるよ */
/* プルダウンにするなら */
/* div#contentTable ul li ul{display:none;}
div#contentTable ul li:hover ul{display:block;}
*/
/* 分かりやすいよう着色 */
div#contentTable ul li ul li{background-color:silver;}
div#contentTable ul li{background-color:lime;}
div#contentTable ul li:hover{background-color:yellow;}
この回答への補足
ありがとうございます
回答を表示させてみました
章の下の項の部分が縦に表示されました
こちらがサンプルとして、BBBの下にaaa、bbbがあるだけ
わかりにくかったと思いますが、aaa、bbbも
横に表示したいと思います
この点についてないも触れていないの、こちらのミスですが
第一段目の章の部分にマウスオーバー、または」クリックしたとき
第二段目の項の部分が表示されることを考えています
つまり、二章にマウスオーバーで
一章 二章 三章
1項2項3項
三章にマウスオーバーで
一章 二章 三章
1項2項3項
とそれぞれの章の下に項が横並びで表示されるということをしたいと思います
説明不足ですいませんが
このようなことが可能であれば、教えてください
よろしく、お願いします
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- Excel(エクセル) ¥マークを含むパスの処理について(マクロ、または関数) 2 2022/12/25 02:11
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS インラインブロックの中のテキストを上下中央に合わせたい 1 2022/12/24 17:46
- HTML・CSS リストの並べ替え 1 2022/09/13 15:27
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- SQL Server ACCESSで3ファイルを結合して、表を作成するやり方を教えて下さい。 17 2022/08/15 20:34
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ホームページ作成
-
友人のホームページを引き継ぐには
-
FFFTPでサーバに新規フォルダが...
-
ホームページビルダー21で作成...
-
XREA使用で作成したHTMLファイ...
-
メールフォームで送信すると「...
-
ホームページ制作で教えてくだ...
-
FC2ホームページの変更に仕方
-
Nuxtのサイトで、microCMSに入...
-
ホームページの画面文字を濃く...
-
既存画像(gif または png)の背...
-
ホームページビルダー
-
ホームぺージの検索
-
ホームへーじ作り
-
自作ホームページ
-
セキュリティー関連のプラグイン
-
ログインしないとみることがで...
-
アメーバ・ブログは"HTMLタグ"...
-
グリッドレイアウトHTMLとCSS
-
Adobe FLASH に代わるソフトは...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
既存画像(gif または png)の背...
-
ホームページ作成
-
HTMLで、ホームページが作れる...
-
ホームページの画面文字を濃く...
-
ホームページビルダー
-
ホームページビルダーを複数の...
-
ビルドとリビルドの違いを教え...
-
友達にドッキリをしたくて、ホ...
-
ホームページビルダー22でリン...
-
ホームページビルダー15で作っ...
-
今さらですがHPを作成するに当...
-
FFFTPでサーバに新規フォルダが...
-
Adobe FLASH に代わるソフトは...
-
XREA使用で作成したHTMLファイ...
-
FC2ホームページの変更に仕方
-
ホームページビルダーおすすめ?
-
ワードプレスで、画像の横に文...
-
ホームページ作成について。「...
-
ホームページビルダー19文字化け
-
個人のホームページは
おすすめ情報