みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

CSSで横並び→HTMLの記述は?

最近、独学でプログラミングを学び始めた初心者です。
で、HTML&CSSで「メニューリストを横並びにする」にする方法がわかりません。
どうしたら良いでしょうか?
CSSでは、

/* すべてのページに適用 - navまわり - */
#nav li {
display: inline;
list-style-type: none;
padding-right: 30px;
}

で合っていると思いますが、HTMLでは何が間違ってますか?
知識が浅くざっくりとした質問で申し訳ありません。

これだけの情報だと回答が難しいかもしれませんが、非常に困っております。
よろしくお願いします。

投稿日時 - 2015-02-24 13:09:21

QNo.8923842

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

勉強を始めたばかりなら、つまみ食い的にソースをコピーするよりも体系的に基礎を勉強されることをお勧めします。その方が、断然早いです。htmlはマークを付けるだけです。cssも簡単な事の組み合わせですが、組み合わせによっておこる現象が、基本がわかっていないと理解できなく、また、スパゲティソースになってしまいます。

取りあえず、4つのやり方を、上げてみます。まだ、他にもありますが、ややこしくなりそうなので、4つです。説明はしません。興味があれば、ご自身でお調べください。

<html>
<head>
<style type="text/css">
li{background:#eeeeee;width:150px;}
ul{background:#ffdddd;padding:1em;}
#nav li {
display: inline;
list-style-type: none;
padding-right: 30px;
}
#nav1 li {
display:table-cell;
list-style-type: none;
padding-right: 30px;
}
#nav1{
display:table-row;
}
#nav2 {
display: flex;
list-style-type: none;
padding-right: 30px;
}
#nav3 li {
float:left;
list-style-type: none;
padding-right: 30px;
}
</style>
</head>

<body>
<h1>横並びのリスト</h1>
<p>ulの背景はピンク、liの背景はグレーを入れています。</p>
<h2>display:inlineの場合</h2>
<ul id="nav">
<li>あああ</li>
<li>いいい</li>
<li>ううう</li>
<li>display:inlineだと、高さや幅が持てません。paddingやmarginの挙動もちょっと特殊です。</li>
</ul>
<h2>display:flexの場合</h2>
<ul id="nav1">
<li>あああ</li>
<li>いいい</li>
<li>ううう</li>
<li>display: flexという手も</li>
</ul>
<h2>display:table-cellの場合</h2>
<ul id="nav2">
<li>あああ</li>
<li>いいい</li>
<li>ううう</li>
<li>表のセルのように見せかける手法もあります。</li>
</ul>
<h2>floatの場合</h2>
<ul id="nav3">
<li>あああ</li>
<li>いいい</li>
<li>ううう</li>
<li>floatだと、自分自身には高さや幅が持てます。が、浮いちゃうので親要素に対しての高さがなくなりますの背景がめんどうです。また、次の要素が入れば、左に来るのでclearする必要があります。</li>
</ul>
</body>
</html>

投稿日時 - 2015-02-24 17:46:09

お礼

色々な書き方があるんですね。大変参考になりました。

投稿日時 - 2015-02-26 13:55:38

ANo.2

HTMLはこんな感じ

<ul id="nav">
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>

投稿日時 - 2015-02-24 13:18:59

お礼

そう書いてるのですが、できません。なぜかな?

回答ありがとうございます。

投稿日時 - 2015-02-26 13:48:42

ANo.1

#nav li {
    display:inline-block;
    list-style-type: none;
    padding-right: 30px;
}

惜しかったと思います。
またfloutを使った方法もありますので
調べてみてください。

投稿日時 - 2015-02-24 13:18:55

お礼

CSSは合っていると思うのですが・・・HTMLが間違っているかもしれません。大変参考になりました。ありがとうございます。

投稿日時 - 2015-02-26 13:50:25

あなたにオススメの質問