1208746341 CSSの質問です。


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

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

回答の条件
  • 1人2回まで
  • 登録:2008/04/21 11:52:22
  • 終了:2008/04/21 12:23:43

ベストアンサー

id:wizemperor No.1

wizemperor回答回数379ベストアンサー獲得回数522008/04/21 12:14:03

ポイント35pt
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; としておいたほうがいいでしょう。

id:kazuhiko11

ありがとうございます。

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

2008/04/21 12:23:02

その他の回答(1件)

id:wizemperor No.1

wizemperor回答回数379ベストアンサー獲得回数522008/04/21 12:14:03ここでベストアンサー

ポイント35pt
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; としておいたほうがいいでしょう。

id:kazuhiko11

ありがとうございます。

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

2008/04/21 12:23:02
id:monme No.2

monme回答回数1ベストアンサー獲得回数02008/04/21 12:17:13

ポイント35pt

ul {width:800px;}

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

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

id:kazuhiko11

ありがとうございます。

2008/04/21 12:23:25

コメントはまだありません

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

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

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

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