人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: mamoru_t
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● POGPI

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


2 ● a-kuma3

こんな感じで。

/* クラス 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/

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ