1

テキストボックス、ドロップダウンリスト、送信ボタンがあるとします。それらはすべてインライン要素です。つまり、「公式に」マージン、パディング、幅、高さのプロパティは無視する必要があります（実際にはそうではありません）。高さをボタンに設定する正しい方法を実行する場合は、display：blockのように記述してから、高さを定義します。ただし、ブロックレベルの要素が予期せず拡張されるという考慮事項があるため、幅を固定値に設定することをお勧めします。問題は、ボタンのテキストに基づいて動的に定義できるため、幅がわからないことです。

別のシナリオ：とを使用してメニューを作成したいと思い<ul>ます<li>。いくつかのアイテムを左にグループ化し、いくつかを右に伸ばして、水平に配置したいと思います。<ul>とは両方とも<li>ブロックレベルの要素です。メニューに使用可能なすべての水平方向のスペースを取り、アイテムの高さで遊んだり、メニューアイテムを両側に押したりしたいので、ブロックモードで問題ありません。タスクを実行するには、float：leftとfloat：rightを使用します。ただし、メニュー要素はブロック要素であるため、メニュー要素に幅を設定する必要があります。アイテムのテキストが異なる可能性があるため、幅はわかりません。しかし、すべてがそのままうまくレンダリングされているようです。

フロートや幅を設定せずにブロック要素としてレンダリングするように強制された両方のインライン要素、またはリストアイテムの例に問題があることに気づきませんでした。IE7、FF3、Opera 9、Safariでは、現在のバージョンに関係なく問題なく動作します。問題は残っています：これらのインラインからブロックへの要素または実際のブロック要素が浮いているのに幅が設定されていないことを心配する必要がありますか、それともすべてをそのままにしておく必要がありますか？私は何かが足りないのでしょうか、それとも単に正しくなると期待してはいけないものの1つに過ぎないのでしょうか。

4

5 に答える 5

1

テキストボックス、ドロップダウンリスト、送信ボタンがあるとします。それらはすべてインライン要素です。つまり、「公式に」マージン、パディング、幅、高さのプロパティは無視する必要があります（実際にはそうではありません）。高さをボタンに設定する正しい方法を実行する場合は、display：blockのように記述してから、高さを定義します。ただし、ブロックレベルの要素が予期せず拡張されるという考慮事項があるため、幅を固定値に設定することをお勧めします。問題は、ボタンのテキストに基づいて動的に定義できるため、幅がわからないことです。

Internet Explorerのボックスモデルの癖について言及しているのでない限り、予期せずに拡大または縮小することを心配する必要はありません。ブラウザのバリエーションの正規化に注意を払う限り、問題はありません。栄光をデザインする過程で予期しない望ましくない副作用がある場合は、それをデバッグします。これは、対処するプログラマーのエラーです。CSSは風変わりなものになる可能性がありますが、ほとんどの主要なブラウザーにとって、95％の確率で適切な言い訳にはなりません。他の5％については話しません。

これが私があなたの問題を理解する方法です：

<li>ビューポートの幅（ユーザーが「ブラウザウィンドウ」に表示するもの）にまたがる水平メニューが一貫してビューポートの全幅になるように、フロートメニューが必要です。

固定幅のデザインを考えているように聞こえますが、実際に目的に合っていると思われるのは、流体幅のデザインです。これは、「弾力性のある」デザインを作成し、ユーザーのブラウザウィンドウのサイズに応じて拡大および縮小することを意味します。各要素にピクセル幅が設定されることを想定してデザインを作成した場合、流体幅のヘッダーとナビゲーションを維持するためのエレガントな方法を見つけることができますが、メインコンテンツ領域は固定されています。あなたは完全に再設計することなく幸せな媒体を見つけることができます。このウォークスルーは、おそらくあなたが探しているものになるでしょう。専門用語に慣れておらず、これらのアイデアを詳しく調べたい場合は、固定幅と流体幅という用語の適切な説明がここにあります。

道路のためにもう1つ：

すべての浮動要素に幅を設定することをお勧めするだけでなく、W3CによるCSS2標準の一部です。

  • アンジェリーナ
于 2009-01-02T11:56:00.373 に答える
0

あなたは少しストレスを感じています:)

これらの リンク、特に9.4、9.5、10.3をチェックしてください。そしてctrl-f「インラインブロック」

于 2009-01-02T11:07:45.533 に答える
0

あなたが言及した「公式」ラインを取ると、これらの要素の幅、高さなどを心配する必要がないため、人生は簡単です.

完璧なピクセルを考えないでください。プレゼンテーションの細かな点を心配する必要はありません。標準に従い、ブラウザとそのユーザーがスタイルを定義できるようにします...

（「非公式」の現実世界でそれが本当に簡単だった場合のみ）

于 2009-01-02T11:53:31.283 に答える
0

わかりました、私の質問が正しく理解されていなかったと思います。フローティング ボックスの幅を設定しないとどうなりますか? 設定できません、わかりません。内容にもよるから。すべてのボックスはコンテンツの幅に縮小されますか? これが実際に動作している方法です。そして、私はそれに満足しています。この動作が予想されるはずであるという公式の確認はありますか?

追加: ここで興味深いものを見つけました: http://www.webmasterworld.com/css/3811603.htm

違いに関するより技術的な説明については、推奨事項を確認することをお勧めしますが、簡単に言えば、フロートの動作は css2(1998) と css2.1 (2005 年の数か月、その後 2007 年) の間で変更されました。css2 ではフロートに幅を設定することが必須でしたが、ff3 で見られる「シュリンク ラッピング」は css2.1 です。つまり、2007 年 7 月より前のブラウザは、div#container をビューポート幅全体に拡張する際に、製造時に関連する推奨事項に準拠していることを意味します。(これは Opera を説明するものではありませんが、常に独自のことを行ってきました。)

もしそうなら、私は争っています。前述したように、現在の IE7、FF3、Opera 9、および Safari で動作します。

他にコメントはありますか？

于 2009-01-02T12:35:48.763 に答える
0

（私があなたの問題を理解していると仮定して）

ほとんどの場合、リスト項目に幅を設定する必要はありません。しかし (はい、しかしここにあります) display:block とのリンクがある場合 (引き戸を使いたいとしましょう)、ちょっとしたトリックを行う必要があります:

html:

<ul class="menu">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

そしてCSS：

.menu li {
    float:left
}
    .menu li a {
        display:block;
    }
    /* ===================== */
    /* = and the IE6 trick = */
    /* ===================== */ 
    * html .menu li a {
        width:1%;
        white-space:nowrap;
    }

これを行わないと、LINK がすべての親に拡張されます。LINK は LIST 要素ではありません ;) このようにして、「最小幅」を IE6 に設定すると、他の問題は発生しなくなります。

于 2009-01-02T13:26:54.387 に答える