HTML/CSSで、リストを横並びにするにはどうしたらいいでしょうか?

例えば<UL><LI>でリストを作ると通常は縦並びになりますが、これを横並びにしたいのです。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/04/06 07:00:00
  • 終了:2014/04/13 07:00:08

回答(2件)

id:pogpi No.1

POGPI回答回数378ベストアンサー獲得回数502014/04/06 07:06:12

cssで「float:left」ですね。
class属性付ける時は、「ul class="hoge"」タグで、cssに「ul.hoge{float:left}」とすればできますよ。
「・」が付くのが嫌なら、「list-style-type:none」も指定します。

id:a-kuma3 No.2

a-kuma3回答回数4584ベストアンサー獲得回数19242014/04/06 08:39:37

こんな感じで。

/* クラス yoko-list で指定 */
ul.yoko-list > li {
    float: left;        /* 横並び */
    list-style: none;   /* 頭の「・」を消す */

    /* これ以降は、お好みで */
    padding: 5px 25px;
    border: 1px solid black;
}

<ul class="yoko-list"><!-- クラス yoko-list -->
    <li>あいうえお
    <li>かきくけこ
    <li>さしすせそ
    <li>たちつてと
</ul>

jsFiddle で試したのがこちら。
http://jsfiddle.net/a_kuma3/pPK9H/1/

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません