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

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です。

●質問者: esecua
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:border CSS HTML NG ひとつ
○ 状態 :終了
└ 回答数 : 2/4件

▽最新の回答へ

1 ● GoldenDawn
●10ポイント

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

<!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>

2 ● よたか
●60ポイント

.hatena{

float:left;

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

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

}

.hatena p{

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

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

}

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

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

関連質問


●質問をもっと探す●



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