<li>をfloatで横並びにした場合、IE7のみ、<span>のところで改行されてしまい、最後の部分だけ以下のようになります。
ddd
( xx
x )
IE8やそれ以外のブラウザは<li>のところで改行され、以下のようになります。
aaa ( xxx ) bbb ( xxx ) ccc( xxx )
ddd ( xxx )
どのようにすれば、IE7も<li>のところで改行され他と同じようになりますか。
実際にはaaa,bbb,xxxの文字などはもっと長いものでたまたま画面右端ぎりぎりにdddまで表示され</span>が区切りになって( xxx )の部分がddd下部に縦に3段くらいで表示されます。
IE8や、他のブラウザは、ddd ( xxx ) がセットで画面に収まらないので、<li>でおりかえされており、このようになってほしいのですが。
よろしくお願い致します。
<ul class="list">
<li><a href="a.html"><span style="color: #cccc99">aaa</span> ( xxx )</a></li>
<li><a href="b.html"><span style="color: #cccc99">bbb</span> ( xxx )</a></li>
<li><a href="c.html"><span style="color: #cccc99">ccc</span> ( xxx )</a></li>
<li><a href="d.html"><span style="color: #cccc99">ddd</span> ( xxx )</a></li>
</ul><div style="clear: left;"></div>
ul.list{
list-style:none;
width:100%;
margin: 0 0 .8em 0;
padding: 0;
}
ul.list li {
float:left;
display: inline;
margin-right:.7em;
}
No.2
- 回答日時:
min-widthが、実際の文字列幅より小さかったら意味ないですよ。
No.1
- 回答日時:
floatさせるなら、それはblockでしょうね。
このソースではspanではなく半角スペースが改行させていると考えるべきです。
HTMLの仕様で半角スペースは単語境界として認識される。
【引用】____________ここから
PRE要素を除くすべてのHTMLの要素にとっては、空白類は「語」を分離するものである。 (ここで言う「語」は、「空白類でない文字の列」を意味する。) テキストを整形する際、ユーザエージェントはどれが「語」であるかを認識し、特定言語(用字系)及び出力メディアでの制約に従って整えていく必要がある。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Paragraphs, Lines, and Phrases (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
IE7以前は、ブロックの寸法の算出方法が標準と異なっていたため、狭いブロックと判断し、その内では上記空白文字で折り返される。
IE5ではmin-widthは認識できないが、IE6以降ならmin-widthで制御しましょう。
<!--
ul.list{
list-style:none;
width:100%;
margin: 0 0 .8em 0;
padding: 0;
}
ul.list li {
float:left;
display: block;
margin-right:0.7em;
min-width:5em;
}
-->
この回答への補足
ご回答ありがとうございました。
display: block; min-width:5em; を追加してみましたが、特に変化はありませんでした。半角もなくしてみましたが、やはり同じで( xxx )の部分で改行されます。
他に考えられる理由がお分かりでしたらご教授お願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- その他(プログラミング・Web制作) pythonのWebスクレイピングでfind_allだとurlがNoneに 4 2022/04/17 18:21
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- PHP ランキングを表示する際の画像の大きさを固定することは可能でしょうか? <?php if ( has_ 1 2022/07/21 14:55
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
liタグの中に<p>タグやら<dl>を...
-
レスポンシブWebデザインでリン...
-
divタグ内のコンテンツが重なっ...
-
ulタグやliタグの中でbrタグ...
-
リストマーカーをボックス内に...
-
html/cssの、navを2段にする...
-
ulとliで囲った文字の一部を変...
-
テーブル内のプルダウンの下に...
-
htmlの<ol>タグで、数字などを...
-
HTMLで組織図を作成する方法
-
画像にリンクを張ると画像がず...
-
リストの数字のフォントサイズ...
-
「olタグ」内に「hタグ要素」...
-
<table>の高さ固定。情報増加時...
-
html <ul></ul>の並びで一行空...
-
ul li を使ったリストを作りた...
-
「CSS」リストの2段組どのよう...
-
css で box の四隅に文字をいれ...
-
ボタンを横に並べて表示させる方法
-
html 横並びのリストを中央寄せ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<table>の高さ固定。情報増加時...
-
リストマーカーをボックス内に...
-
画像にリンクを張ると画像がず...
-
レスポンシブWebデザインでリン...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
ポップアップメニューを表のよ...
-
liタグの中に<p>タグやら<dl>を...
-
リストの数字のフォントサイズ...
-
<ul>~</ul>が二つ続くと間に改...
-
<ul><li></li></ul>にするメリ...
-
html <ul></ul>の並びで一行空...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
html/cssの、navを2段にする...
-
display:table;を多段表示させたい
-
HTML5のfooterに見出しを付けて...
-
divタグ内のコンテンツが重なっ...
-
リストを2つに分割して、それぞ...
-
複数行にまたがる括弧を表示し...
おすすめ情報