html + cssにて、横スクロールバーを表示させるにはどうしたらよいでしょう?


邪道を承知で質問です。

例えばブラウザの横幅が800pxだとして…

[div width="300px"][div width="300px"][div width="300px"]

と3つのdivを(float:leftやdisplay:inline-boxで)並べようとすると、

[div width="300px"][div width="300px"]
[div width="300px"]

というように最後の3個目が折り返されてしまいます。

横スクロールバーを表示させてでも3つを横並びにさせるには、どうすればよいでしょうか?

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/09/23 00:32:49
  • 終了:2012/09/30 00:35:03

回答(3件)

id:HowAreYou No.1

HowAreYou回答回数91ベストアンサー獲得回数172012/09/23 01:23:44

ポイント34pt

親要素の width を 900px 以上にする。

[div width="900px"
  [div width="300px"][div width="300px"][div width="300px"]
]
id:a-kuma3 No.2

a-kuma3回答回数4596ベストアンサー獲得回数19352012/09/23 02:13:02

ポイント33pt

<nobr> で括る。

<style>
.item {
    display: inline-block;
    width: 300px;
}
</style>

<nobr>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</nobr>
id:oil999 No.3

oil999回答回数1728ベストアンサー獲得回数3202012/09/23 10:12:54

ポイント33pt

CSS の display: inline を使います。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div.hoge { display: inline; }
</style>
</head>
<body>
<div class="hoge">1</div>
<div class="hoge">2</div>
<div class="hoge">3</div>
</body>
</html>

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

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

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

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

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