![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
リストをcssでフロートで横並びにした場合の話ですが、
たとえば、項目が5つあって、liのwidthを指定せずに500pxのボックスの中に横並びにすると、5つの合計の幅が500pxでおさまる場合は問題ないのですが、おさまらない場合、IEで項目の途中で改行されてしまいます。
li { white-space: nowrap; } で改行させないようにすることはできるのですが、これだと、1項目の中身が500pxを超えてしまうような長文の場合、逆に突き抜けてしまい困っております。
何かよい方法があればご教授いただけると助かります。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
改行させないで、つきぬけないならどうしたいのでしょう?
その辺を書かないと、命題が矛盾してしまいます
おそらくoverflow:hidden的な解決方法を希望しているのだとは
思いますが・・・
この回答への補足
説明不足で申し訳ありません。。。
つまり、上の例ですと、li { white-space: nowrap; } なら、5つあるli要素の合計が500pxを超える場合はli要素単位で下に落ちるのでのですが、↓
【li要素1】 【li要素2】 【li要素3】
【li要素4】
ひとつのli要素だけで500pxを超えるような長文の場合、li要素内では改行しないので、
【li要素1li要素1li要素1li要素1li要素1li要素1li要素1li要素1】
↑のように突き抜けてしまうので、↓のように改行するようにしたいのです。その場合、li { white-space: nowrap; }は使えないと思うので何か良い方法があれば と思ったわけです。
【li要素1li要素1li要素1li要素1li要素
1li要素1li要素1li要素1】
【li要素2li要素2li要素2li要素2li要素
2li要素2li要素2li要素2】
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) ピボットテーブルについて 列フィールドに複数横並びに項目を表示したい場合、階層毎に表示されてしまう現 2 2022/06/28 00:27
- Excel(エクセル) 範囲指定をした中で、住所の列をユーザー設定の並べ替えをしたい 3 2022/05/15 13:51
- Excel(エクセル) IF 関数で「〇〇 という文字を含む場合」の分岐処理で表示された数字はSUMで数字集計できますか? 3 2022/08/02 16:29
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- Visual Basic(VBA) 【至急】 当方初心者です。 マクロについて知恵をお貸しください。 ★したい動作 ①リストE列2行目か 4 2022/09/29 18:56
- その他(悩み相談・人生相談) 今日、ファストフード店で割り込みをしてしまいました。 まずショッピングモールに遊びにきて、お昼を食べ 4 2022/09/07 15:34
- 建設業・製造業 見積作成(エクセル)について教えて下さい。 2 2023/05/10 13:47
- Excel(エクセル) 列を自動で追加したい 3 2022/07/11 12:58
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- 電気・ガス・水道業 簡易専用水道の定期清掃について 3 2023/03/26 16:36
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
改行できる・できない入力ボッ...
-
Hタグを改行禁止にしてspanのよ...
-
テーブルの幅を固定するとnowra...
-
H1タグに改行の<br>を使う
-
<br >と<br /> 違い
-
VBE でスペースと改行を見える...
-
テキストエリア内の改行もその...
-
<br />タグの、brの後の半角ス...
-
<br style="clear:both;">って...
-
textareaに改行を表示させる
-
テキストエリアの幅を10桁まで...
-
mailtoで本文に改行を入れたい
-
<P ALIGN>と<DIV ALIGN>の明確...
-
Dream Weaverの改行時にTabキー...
-
XMLの改行方法とリンクの仕方
-
Eclipseでタブや改行マークの色...
-
改行したときの幅を狭くする方法
-
行コメントが無い理由
-
preタグがプロの現場であまり使...
-
html形式の覚え書きを簡単に作...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
\\n \\r \\t について
-
テキストエリア内の改行禁止
-
改行できる・できない入力ボッ...
-
preタグがプロの現場であまり使...
-
テーブルの幅を固定するとnowra...
-
H1タグに改行の<br>を使う
-
「:」について
-
テキストエリア内の改行もその...
-
htmlで文字列をクリップボード...
-
Hタグを改行禁止にしてspanのよ...
-
長いURLを途中で改行(折り返す...
-
カーソルを合わせると説明を表...
-
XMLの改行方法とリンクの仕方
-
VBE でスペースと改行を見える...
-
Windowsのformでtextareaに入力...
-
文字の最後に半角空白が勝手に...
-
高校1年生情報の問題について。
-
PCの画面を縮小したらサイズ...
-
<br />タグの、brの後の半角ス...
-
<TD><input type="text"></TD>...
おすすめ情報