プロが教える店舗＆オフィスのセキュリティ対策術

CSSでメニューボタンを横一列に表示する方法

解決済

  • 質問者：azu200
  • 質問日時：
  • 回答数：3件

<ul>でくくったメニュー項目の画像を横一列に表示したいのですが
どうしても縦一列に表示されてしまいます。
どうしたら横一列に表示することができますか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.1

  • 回答者： ORUKA1951
  • 回答日時：

つい先日



TABLEの高さを固定したいのですが… - HTML - 教えて！goo ( http://oshiete.goo.ne.jp/qa/6781310.html )
で書いたもの。
No.10のCSSを、No7-No.8のHTMLと組み合わせる。


#siteMap{position:absolute;top:0;width:100%;left:0;margin:0;padding:0;}
#siteMap ul,#siteMap li{display:block;list-style:none;margin:0;padding:0;line-height:14px;}
#siteMap ul li{width:18%;float:left;padding:2px;margin:0 2px;}
#siteMap ul li a{display:block;height:100%;width:100%;text-decoration:none;text-align:center;background-color:white;}
#siteMap ul li a:hover{background-color:Yellow;}

あるいは
IE6,IE7だとメニューが写真の裏に表示される - HTML - 教えて！goo ( http://oshiete.goo.ne.jp/qa/6723422.html )

ポイントは、ulをblockにしてabsoluteでページ最上部などに置き、その中にliをやはりブロック(ただし小さなもの)にして、ul内でfloatさせる。このとき、aもブロックにしてheight、widthを100%にして、text-decorationをなしにしておくと良い。
<div class="nav">
<ul>
<li><a href=""></a></li>

だと
div.nav ul,div.nav ul li,div.nav ul li a{display:block;list-style:none;height:12px;}
div.nav ul{position:absolute;top:0;left:0;width:100%;}
div.nav ul li{width:20%;float:left;}
div.nav ul li a{width:100%;height:100%;}
これだけが、基本、あとはline-height、背景色、枠、a:hoverなど動的な擬似クラスを指定する。
    • good
    • 0
    • 件
通報する

No.2ベストアンサー

  • 回答者： hinananana
  • 回答日時：

サンプルで書いてみました。


画像ではないのと、ちょっと無理やりなんですが参考までに・・・；


/*--CSS--*/

.nav ul{
list-style:none;
padding:0;
margin:0;
}

.nav li{
border:solid 2px #0000ff;
display:inline;
width:100px;
margin-left:-5px;
}

/*--HTML--*/

<div class="nav">
<ul>
<li>あああ</li>
<li>いいい</li>
<li>ううう</li>
<li>えええ</li>
<li>おおお</li>
</ul>
</div>


liのdisplay:inline;で横に並びます。
が、display:inline;だけだと画像と画像の間に余白ができると思うので
margin-left:-5px;を入れました。
pxは全然変えておｋです。


それと
もし横並びの指定をしていて縦に並ぶといいますか、、、表示が崩れる場合
例えば

/*--CSS--*/
.wrap{
width:200px;
}

.nav ul{
list-style:none;
padding:0;
margin:0;
}

.nav li{
border:solid 2px #0000ff;
display:inline;
width:100px;
margin-left:-5px;
}

/*--HTML--*/

<div class="wrap">
<div class="nav">
<ul>
<li>あああ</li>
<li>いいい</li>
<li>ううう</li>
<li>えええ</li>
<li>おおお</li>
</ul>
</div>
</div>

これをすると崩れるので
直すにはwrapのwidthを広く指定したら表示崩れにはならなくなります。


以上

変なところがあったら指摘してください・・・；
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： dscripty
  • 回答日時：

ウェブデザイン学習者じゃないみたいだから、ざっくりポイントだけ説明するよ。



そもそも ul タグと li タグは、箇条書きのためのタグだから、そのまま、

<ul id="menu">
  <li>項目</li>
  <li>項目</li>
  <li>項目</li>
</ul>

と書いたら、それぞれの『項目』の左に●が追加されて、縦にならぶよね。
これは、li タグが元々持っている、出力(表示とか印刷ね)のときのスタイルなんだ。

ちなみに li のこのスタイルは display: という CSS の属性で、値は list-item だよ。
つまりこれを CSS で換えてあげれば OK。

<style type="text/css">
  #menu > li {
    display:block; /* ← シンプルな長方形を表すスタイル */
    width:130px; /* ← 画像の幅を px で指定するところ */
    height:25px; /* ← 画像の高さを px で指定するところ */
    /* ↓ 次の li を次の行に出力(表示とか印刷ね)しないで、この li タグのすぐ右に出力 */
    float:left;
    /* ↓この例を見やすくするためのだけ設定だから、実際はいらない */
    border:solid 1px gray;margin-right:-1px;padding:0.2em 0.5em;
</style>


以下は、各属性の簡単な説明ね。

display:block;
width を指定しないと、親のブロック要素(※1)の幅いっぱいに広がる。
(※1)タグがウェブブラウザに読み込まれると要素になる。

width:,height:
要素の幅と高さを強制する。

float:left;
これ、すごくわかりにくいんだけど、↓こんな感じ。
継続する全ての要素に以下の性質を付与する。
このブロック要素の高さが 0 だとみなす。
このブロック要素の幅の分だけ、x 座標を右に移動する。
この右への移動は、このブロック要素の高さまで続けるか、または、
clear:both; を付与された ブロック要素が現れるまで続ける。


で、↓のようになるとおもう。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>li で メニュー</title>
<style type="text/css">
  #menu { margin:0; padding:0; }
  #menu > li {
    display:block;
    float:left;
  }
  #menu > li, #menu > li img {
    width:130px;
    height:25px;
  }
  #content { clear:both; }
</style>
</head>
<body>
<div id="header">
<p>なにかヘッダを書くところ</p>
<ul id="menu">
  <li><a href="page1.html" title="page1.html のタイトル"><img src="img/page1.png" alt="画像の説明"/></a></li>
  <li><a href="page2.html" title="page2.html のタイトル"><img src="img/page2.png" alt="画像の説明"/></a></li>
  <li><a href="page3.html" title="page3.html のタイトル"><img src="img/page3.png" alt="画像の説明"/></a></li>
  <li><a href="page4.html" title="page4.html のタイトル"><img src="img/page4.png" alt="画像の説明"/></a></li>
</ul><!-- #menu -->
</div><!-- #header -->

<div id="content">
  <!-- ↓この style は例を見やすくするためだけの設定だから、実際はいらない -->
  <p style="padding:10em 1em;">何かコンテンツをかくところ</p>
</div><!-- #content -->

<div id="footer">
  <p>なにかフッターを書くところ</p>
</div><!-- #footer -->
</body>
</html>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報