css html


<div class="hatena"><p>hogehoge</p></div>

があり、divのborderを少しCSSでいじってます。

<div class="hatena"><p>hogehoge</p></div><div class="hatena"><p>hogehoge</p></div>
のように並べた際、
[][]
のように横に並ばず
[]
[]
と縦に並んでしまいます。
tableなどを使用すれば横に出来るのかと思うのですが、ここはひとつCSSだけで出来る方法を教えて下さい。

ちなみに他の要素を付け足すのはNGです。

回答の条件
  • 1人2回まで
  • 登録:2009/01/06 17:19:44
  • 終了:2009/01/07 13:10:31

回答(4件)

id:GoldenDawn No.1

GoldenDawn回答回数426ベストアンサー獲得回数812009/01/06 17:59:59

ポイント10pt

他の要素によっては手直しが必要かもですが。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <style type="text/css">
      .hatena {
        border       : solid 6px ;
        width        : 50% ;
        float        : left ;
        margin-left  : -6px ; /* border の横幅の負数 */
        margin-right : -6px ;
        _position    : relative ; /* IE対策 */
      }
    </style>
  </head>

  <body>
    <div class="hatena"><p>hogehoge</p></div><div class="hatena"><p>hogehoge</p></div>
  </body>
</html>
id:yotaca No.2

よたか回答回数423ベストアンサー獲得回数462009/01/06 17:54:58

ポイント60pt

.hatena{

float:left;

width:200px;/*任意のサイズで!*/

height:30px;/*必要であれば指定してください。*/

}

.hatena p{

width:100%;/*指定しなくても大丈夫かもしれません*/

height:30px;/*上で指定せずにこちらで高さを指定した方がいいかも。*/

}

私がやる時はこんな感じで指定しています。

高さなどについては状況によって変えてます。

質問者が未読の回答一覧

 回答者回答受取ベストアンサー回答時間
1 chimakei 8 7 0 2009-01-06 17:33:11
2 yyok 59 53 3 2009-01-06 18:05:24

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

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

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

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

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