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

CSSの質問です。

800pxの枠の中に
<ul>
<li>リンゴ</li>
<li>バナナ</li>
<li>ミカン</li>
<li>メロン</li>
</ul>

と、個別にクラス指定とかはせずに400pxずつ2列づつに並ぶようなCSSの記述方法を教えて下さい。

1208746341
●拡大する


●質問者: kazuhiko11
●カテゴリ:ウェブ制作
✍キーワード:CSS クラス バナナ ミカン メロン
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● wizemperor
●35ポイント ベストアンサー
ul
{
 margin: 0;
 padding: 0;
 width: 800px;
 list-style: none outside;
}

ul li
{
 margin: 0;
 padding: 0;
 float: left;
 width: 400px;
}

こんな感じで、margin/padding/widthは適宜、調整すればできます。

全ての ul で同じようになるので、親要素があればセレクタにそれを指定(div.fruit ulとか)。

ulの次の要素で clear: left; としておいたほうがいいでしょう。

◎質問者からの返答

ありがとうございます。

回り込みの解除方法までご指定いただきありがとうございました。


2 ● monme
●35ポイント

ul {width:800px;}

ul li {float:left;width:400px;}

これが一番シンプルかなと思います。

◎質問者からの返答

ありがとうございます。

関連質問


●質問をもっと探す●



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