
CSSでデザインしてるのですが・・・。
ナビゲーションバーで横並びに4項目。
ここまでは出来るのですが、この4項目を
2段にして、8項目にするには、どのように書くのがスマートでしょうか。
テーブルにしたほうが早そうな気もしますが、
表かといいうと、違う気もします。
ulでリスト表示の途中で改行させる方法があるのか、
マークアップが適切とはいえないけれど、
リストが二つあることにして、ulを二つにするか、
などと考えています。
初心者でよくわかっていないのですが、
皆様はどのようにしたら良いと思われますか?
よろしくお願いします。
No.1ベストアンサー
- 回答日時:
たとえば、外枠のブロックで横幅を決めちゃって、その中で float: left; じゃだめ?非常に単純にCSSとHTMLを書くとこんな感じ。
■CSS部
*{
margin:0;
padding:0;
}
ul {width: 600px;}
li {
height: 50px;
width: 150px;
list-style-type: none;
float: left;
display: block;
}
■HTML部
<ul>
<li>めにゅー1</li>
<li>めにゅー2</li>
<li>めにゅー3</li>
<li>めにゅー4</li>
<li>めにゅー5</li>
<li>めにゅー6</li>
<li>めにゅー7</li>
<li>めにゅー8</li>
</ul>
No.2
- 回答日時:
<ul>を二つ作ってそれを2段にするとどうでしょう。
文字数がばらばらでも確実に4つずつ詰め込めますし、
一段に入れる量も簡単に変えられるでしょう。
幅の設定はなくてもいいはずです。
マージンの設定は適当に変えてください
ul{margin:0px;}
li{display:inline;margin:0px 3px;}
<ul><li>1段目1つ目</li><li>1段目2つ目</li>・・・</ul>
<ul><li>2段目1つ目</li><li>2段目2つ目</li>・・・</ul>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
複数行にまたがる括弧を表示し...
-
ページを開いているときのリン...
-
list-style-type部分だけ大きく...
-
html/cssの、navを2段にする...
-
<li>タグの数が増えすぎたので...
-
横並びのリストで左端がはみ出る
-
リストを2つに分割して、それぞ...
-
liタグの中に<p>タグやら<dl>を...
-
html <li>の中の文字一部に色を...
-
Dreamweaverで、ul要素の下に写...
-
HTML5のfooterに見出しを付けて...
-
番号付きリスト(<Ol><Li>・・...
-
<ul><li></li></ul>にするメリ...
-
cssでリストを横並びのセンタリ...
-
htmlの文字が縦書きになる
-
idの中のid指定
-
画像タグについて
-
含む含まないという概念自体の...
-
HRタグ 枠線を透明にするには?
-
widthやheightの数値に単位(px...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
html/cssの、navを2段にする...
-
list-style-type部分だけ大きく...
-
複数行にまたがる括弧を表示し...
-
html <li>の中の文字一部に色を...
-
ページを開いているときのリン...
-
番号付きリスト(<Ol><Li>・・...
-
リストを2つに分割して、それぞ...
-
リストの左余白の削除方法
-
<li>タグの数が増えすぎたので...
-
html <ul></ul>の並びで一行空...
-
<ul><li></li></ul>にするメリ...
-
css 横並びのナビゲーションバ...
-
htmlの<ol>タグで、数字などを...
-
<li>で改行する横並びのメニュー
-
ページ内リンク!?のしかた
-
イメージマップと画像のスライ...
おすすめ情報