ボックスの幅を内容に合わせたい

質問

初めまして。
CSSについての質問を投稿すべき場所が分からなかったのでこちらに投稿させていただきます。

ulタグのリストをボックスで囲おうとしているのですが、どうやら内容の幅に関係なくブラウザの端から端まで広がってしまうのがデフォルトみたいですね。
できればliタグの中身の幅に合わせたいのですが、どのように設定すればいいのでしょうか？自動的に内容の幅に従わせる方法はありますか？
ちなみに、ブラウザの幅を一行の長さ以下にした場合に崩れてしまうのは妥協してもいいと思っています。
現在CSSの記述は
ul {
list-style-type : none;
border : double 3px #cc6600;
margin-left : 1em;
}
です。

回答No.3

abril · ベストアンサー

> IE6とSleipnirでは実現できませんでした(ちなみにwinXPです)。

Sleipnirは導入していないので実装状況を確かめられませんが、IE のレンダリング・エンジンを使用しているので同じ挙動になるのでしょうね。

> inline-blockはインライン要素にのみ適用されると紹介しているページをいくつか見つけました。もしかしたらそれが原因なのかもしれません。

その様ですね。本来の仕様では「全ての要素」に適用できる筈なのですが…まあIEの独自解釈は今に始まったことではないので何とか対策を施すしかないですね。こちらでも引き続き調べましたところ、IE6/7で「ブロック要素に対して"display:inline-block"を有効にする方法」というのがある様です。
※「ある様です」という不確実な表現をしているのは出先なので各環境での検証ができない状態が続いているからです。ご容赦下さい。
元々ブロック要素であるものに対しては"display: inline;"と"zoom: 1;"を併せて定義すれば、その要素は"display: inline-block;" とした時の本来の挙動と類似する様になる様です。なので、この理論上では：
ul {
display: table;
_display: inline;
_zoom: 1;
list-style-type: none;
border: double 3px #cc6600;
margin-left : 1em;
}
/* IE7 hack */
*:first-child+html ul {
display: inline;
zoom: 1;
}
とすれば、Firefox/Safari/Operaの表示結果はそのまま、IE6/7はdisplayの扱いが変更されて意図した表示になるのでは…と。
ちなにに"zoom"はIEの独自拡張ですので他環境では無視されます。
未検証につき、再び不具合がある様でしたらご容赦下さい。

お礼

わざわざ調べてくださってありがとうございます。

zoom…これも知りませんでした。
そして、おかげさまで狙い通りの表現になりました。
abrilさん本当にありがとうございます。

回答No.2

abril

> ulタグのリストをボックスで囲おうとしているのですが、どうやら内容の幅に関係なくブラウザの端から端まで広がってしまうのがデフォルトみたいですね。

ulはブロック要素ですので特に指定しなければ親要素の幅になります。この場合であればbodyの幅一杯という事です。

> できればliタグの中身の幅に合わせたいのですが、どのように設定すればいいのでしょうか？自動的に内容の幅に従わせる方法はありますか？

ちょっとANo.1様と解釈が違うのですが、上記の意味は、
---をウィンドウサイズ
***を<ul>のレンダリングエリア
とした場合、ディフォルトでは：
--------------------------------------
**************************************
・テキスト
・テキストテキスト
**************************************
--------------------------------------
となってしまうのを、子要素<li>の内包する要素のボリューム（テキストの長さ）に併せて自動的に幅をぴったりにしたい、という事でしょうか？（下記イメージ）
--------------------------------------
************************
・テキスト
・テキストテキスト
************************
--------------------------------------

であれば、displayプロパティを変更する事で実現できると思います。
ul {
display: table;
_display: inline-block;
list-style-type: none;
border: double 3px #cc6600;
margin-left : 1em;
}
/* IE7 hack */
*:first-child+html ul {
display: inline-block;
}

"display: table;"とすると、tableと同じ様に内容に合わせて幅は自動的に調整されます。ただし、この"display: table;"がIE6/7では未実装の為、無効になります（Firefox/Opera/Safariは実装済）。そこで、IE対策としてhack等でプロパティを振り分けます。上記の"_display: inline-block;"はIE6用のアンダースコア・ハック、*:first-child+html ul {～}がIE7用です。"display: inline-block;"にするとインライン要素と同様に（この場合であれば）内包するテキストに合わせてレンダリングされ、且つブロック要素の性質も併せ持つ、という状態になりますので、他環境に適用した"display: table;"と同様の効果を得られる筈、です。
ただし今、各環境での検証ができないので、理論上です。不具合がある様でしたらご容赦を。

お礼

ありがとうございます。
tableもinline-blockも知りませんでした。
さっそく試してみたのですが、OperaとFirefoxでは狙い通りになったのですがIE6とSleipnirでは実現できませんでした(ちなみにwinXPです)。

どうせCSSの記述変更だけなのだから一旦諦めて保留にしようかと思い始めています。

補足

ちなみに、自分でも少し調べてみたのですが、inline-blockはインライン要素にのみ適用されると紹介しているページをいくつか見つけました。もしかしたらそれが原因なのかもしれません。

回答No.1

noname#66720

レイアウトにもよりますが、liにdisplay:inline;を指定するのが一番早いです。
そのとき、HTML側の記述を

<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>

という記述の仕方を

<ul>
<li>menu1</li><!--
--><li>menu2</li><!--
--><li>menu3</li>
</ul>

という感じに記述してください。
厳密にはliタグの間にスペースや改行を含めないようにする必要があるのですが、さすがに見辛いのでコメントアウトにしておくと良いと思います。

floatを使う方法もあるのですが、IEの周りでバグが多くあるためあまりオススメできません。

お礼

ありがとうございます。

＃２の回答者さまの表現をお借りしてしまいますが、display : inlineを設定したときにボックスが

**********
*テキスト
**********
****************
テキストテキスト
***************
*********
テキスト*
*********

となってしまうのを回避する方法と解釈してよろしいでしょうか？
残念ながら実現できませんでした。申し訳ありません。