
<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で質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<ul><li></li></ul>にするメリ...
-
li タグ全体をリンクに。
-
liにスタイルシートが上手くい...
-
HTMLとCSSを使い、
-
jQueryの導入方法について
-
<ul>~</ul>が二つ続くと間に改...
-
HTMLで画像を3つ並べる方法
-
文字の先頭につけるアイコン
-
divタグ内のコンテンツが重なっ...
-
cssでロールオーバーを作る...
-
ol要素の番号とリスト項目の離...
-
動きのあるサイトの作り方がし...
-
li 長さ指定
-
<!-- #BeginLibraryItemとは
-
含む含まないという概念自体の...
-
idの中のid指定
-
スタイルシートで、id属性の中...
-
1時間30分を簡単に表したいで...
-
<form <input type="text"の枠...
-
safariでの横並びリスト(List...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
liタグの中に<p>タグやら<dl>を...
-
html/cssの、navを2段にする...
-
複数行にまたがる括弧を表示し...
-
ulタグやliタグの中でbrタグ...
-
リストマーカーをボックス内に...
-
divタグ内のコンテンツが重なっ...
-
ページを開いているときのリン...
-
画像をレスポンシブだと 二つず...
-
( html) 位置指定方法を教えて...
-
htmlの<ol>タグで、数字などを...
-
Jquery アコーディオンメニュー...
-
テーブル内のプルダウンの下に...
-
リストの数字のフォントサイズ...
-
list-style-type部分だけ大きく...
-
HTMLでメニューをリストで書き...
-
番号付きリスト(<Ol><Li>・・...
-
html <ul></ul>の並びで一行空...
-
線をアレンジしたい。
-
HTMLで組織図を作成する方法
-
リスト(ul / li)タグの左イン...
おすすめ情報