初めまして。
CSSについての質問を投稿すべき場所が分からなかったのでこちらに投稿させていただきます。
ulタグのリストをボックスで囲おうとしているのですが、どうやら内容の幅に関係なくブラウザの端から端まで広がってしまうのがデフォルトみたいですね。
できればliタグの中身の幅に合わせたいのですが、どのように設定すればいいのでしょうか?自動的に内容の幅に従わせる方法はありますか?
ちなみに、ブラウザの幅を一行の長さ以下にした場合に崩れてしまうのは妥協してもいいと思っています。
現在CSSの記述は
ul {
list-style-type : none;
border : double 3px #cc6600;
margin-left : 1em;
}
です。
No.3ベストアンサー
- 回答日時:
> 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
- 回答日時:
> 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;"と同様の効果を得られる筈、です。
ただし今、各環境での検証ができないので、理論上です。不具合がある様でしたらご容赦を。
この回答への補足
ちなみに、自分でも少し調べてみたのですが、inline-blockはインライン要素にのみ適用されると紹介しているページをいくつか見つけました。もしかしたらそれが原因なのかもしれません。
補足日時:2008/07/15 14:57ありがとうございます。
tableもinline-blockも知りませんでした。
さっそく試してみたのですが、OperaとFirefoxでは狙い通りになったのですがIE6とSleipnirでは実現できませんでした(ちなみにwinXPです)。
どうせCSSの記述変更だけなのだから一旦諦めて保留にしようかと思い始めています。
No.1
- 回答日時:
レイアウトにもよりますが、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の周りでバグが多くあるためあまりオススメできません。
ありがとうございます。
#2の回答者さまの表現をお借りしてしまいますが、display : inlineを設定したときにボックスが
**********
*テキスト
**********
****************
テキストテキスト
***************
*********
テキスト*
*********
となってしまうのを回避する方法と解釈してよろしいでしょうか?
残念ながら実現できませんでした。申し訳ありません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- C言語・C++・C# ある線が円の範囲に入っているかの計算 1 2022/12/07 16:14
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript ブラウザの横幅に応じてとある画像(e.jpg)を画面いっぱいに表示できるようにしたいです。(写真の横 1 2022/10/06 21:17
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
番号付きリスト(<Ol><Li>・・...
-
<ul>~</ul>が二つ続くと間に改...
-
IEでスクロールできない
-
liタグの中に<p>タグやら<dl>を...
-
リストマーカーをボックス内に...
-
htmltとcssの連携をして画像縮...
-
円形の配置にするコーディング...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
<table>の高さ固定。情報増加時...
-
HTML5のfooterに見出しを付けて...
-
jQuery-もっと見るボタンをスマ...
-
CSSのみでのドロップダウンメニ...
-
(HP作成)メニューバーのプル...
-
display:table;を多段表示させたい
-
アコーディオンメニューがかく...
-
css ol liにdisplay:inlineを設...
-
HTMLで画像を3つ並べる方法
-
なぜ?マウスオーバーで1pt位置...
-
レスポンシブWebデザインでリン...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
divタグ内のコンテンツが重なっ...
-
<ul><li></li></ul>にするメリ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
リンク文字同士の間隔を開ける...
-
<ul>~</ul>が二つ続くと間に改...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
display:table;を多段表示させたい
-
ボタンを横に並べて表示させる方法
-
CSS質問:大手サイトを見ると何...
-
html <li>の中の文字一部に色を...
-
html <ul></ul>の並びで一行空...
-
Tableの1セル内に画像・テキス...
おすすめ情報