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

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

解決済みの質問

CSSでulとliを指定し横に並べたいです。

ulとliを使っても横に表示できる方法わかる方教えてください。


<ul>
<li>あああ</li>
<li>いいい</li>
<li>ううう</li>
<li>えええ</li>
</ul>
普通は
・あああ
・いいい
・ううう
・えええ
となってしまいますがこんな感じで作りたいのですが。

・あああ  ・いいい   ・ううう   ・えええ

みたいに横にしたのですがどうやってやればいいかわかりません(泣)
たぶんCSSで指定するのかと思ってますが、違うんでしたらそのやり方を教えてください。

投稿日時 - 2008-08-10 21:40:25

QNo.4242284

すぐに回答ほしいです

質問者が選んだベストアンサー

li {
display:inline;
}

で出来ます。ただ、この方法ではリストマークが表示されなくなりますので、
背景画像で、マークをつけてやるようにすればいいと思います。

投稿日時 - 2008-08-13 16:38:56

ANo.2

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

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

回答(3)

ANo.3

質問に書いてあるとおりに再現するとして、以下のような記述でどうでしょう。

CSS
ul.list{margin:0; padding:0;}
.list li{float:left; margin:0 20px 0 5px;}

HTML
<ul class="list">
<li>あああ</li>
<li>いいい</li>
<li>ううう</li>
</ul>

こちらのサイトの「リストを作る(HTML,CSS一覧)」→「リストを横に並べる」がサンプルと注意事項等が書いてあって参考になるのでは、と思います。
http://www.1uphp.com/

投稿日時 - 2008-08-15 16:55:28

ANo.1

CSSで出来ますよ。

li{
display: inline;
}

としてみてください。

投稿日時 - 2008-08-10 21:46:26

あなたにオススメの質問