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

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つを横並びにさせるには、どうすればよいでしょうか?

●質問者: delighter
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● HowAreYou
●34ポイント

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

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

2 ● a-kuma3
●33ポイント

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

3 ● oil999
●33ポイント

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>
関連質問

●質問をもっと探す●



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