フローティングされたブロックレベル要素:幅を設定する必要がありますか?必要な場合はどのように設定しますか?

StackOverflow https://stackoverflow.com/questions/406504

  •  03-07-2019
  •  | 
  •  

質問

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

別のシナリオ:メニューを作成したいのですが <ul> そして <li>. 。いくつかの項目を左側にグループ化し、いくつかの項目を右側に伸ばして、水平方向に配置したいと考えています。両方 <ul> そして <li> はブロックレベルの要素です。私はメニューに利用可能な水平スペースをすべて占有してから、項目の高さを調整し、メニュー項目を両側に押し込みたいので、ブロックモードで十分です。このタスクを達成するには、float:left と float:right を使用するだけです。ただし、メニュー要素はブロック要素であるため、メニュー要素に幅を設定する必要があります。アイテムのテキストは異なる可能性があるため、幅はわかりません。しかし、すべてがそのままで問題なくレンダリングされているようです。

フローティングまたは幅が設定されずにブロック要素として強制的にレンダリングされるインライン要素、またはリスト項目の例の両方に問題はありませんでした。現在のバージョンが何であっても、IE7、FF3、Opera 9、Safari で問題なく動作します。疑問は残ります:これらの inline-to-block 要素または浮動しているが幅が設定されていない実際のブロック要素について心配すべきでしょうか、それともすべてをそのままにしておくべきですか?私に何かが欠けているのでしょうか、それとも、単に正しくなることを期待してはいけないもののもう 1 つでしょうか?

役に立ちましたか？

解決

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

言及していない限り、 Internet Explorer のボックス モデルの癖, 、予期せず拡大または縮小することを心配する必要はありません。あなたが世話をする限り ブラウザの変動に合わせて正規化する, 、 きっと大丈夫だよ。栄光をデザインする途中で予期せぬ望ましくない副作用が発生した場合は、それがプログラマーのエラーであるため、それをデバッグします。CSS は風変わりな場合がありますが、ほとんどの主要なブラウザにとって、95% の場合、それは適切な言い訳ではありません。残りの 5% については話しません。

私はあなたの問題を次のように理解しています。

フローティングのメニューが必要です <li> これにより、ビューポートの幅 (ユーザーが「ブラウザ ウィンドウで」見るもの) にまたがる水平メニューが、一貫してビューポートの全幅になるようになります。

固定幅デザインの観点から考えているように見えますが、実際には、流動幅デザインが目的に適しているように思えます。これは、ユーザーのブラウザ ウィンドウのサイズに応じて伸縮する「伸縮性」のあるデザインを作成することを意味します。各要素にピクセル幅が設定されることを想定してデザインを作成した場合は、固定幅のメイン コンテンツ領域を持ちながら、流動的な幅のヘッダーとナビゲーションを維持するエレガントな方法が見つかるでしょう。完全に再設計しなくても、満足のいくメディアを見つけることができます。 おそらくこのチュートリアルがあなたが探しているものになるでしょう。 良い 固定幅と流動幅という用語の説明 専門用語に詳しくなく、これらのアイデアを詳しく知りたい場合は、ここで見つけることができます。

道路用にもう 1 つ:

すべてのフロート要素の幅を設定する は推奨されるだけでなく、W3C による CSS2 標準の一部です。

  • アンジェリーナ

他のヒント

あなたは自分自身に少しストレスを感じています：）

これら リンク、特に9.4、9.5、10.3。 ctrl-f <！> quot; inline-block <！> quot;

<！> quot; Official <！> quot;あなたが言及した行は、これらの要素の幅、高さなどについて心配する必要がないので、人生は簡単です。

ピクセルが完璧だとは思わないでください。プレゼンテーションの細かい点を気にせず、標準に従ってください。ブラウザに<！> amp;を許可してください。ユーザーがスタイルを定義する...

（<！> quot; un-Offical <！> quot;実世界で本当に簡単だった場合のみ）

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

追加： ここで興味深いものを探しています： http://www.webmasterworld.com/css/3811603.htm

技術的な違いの違いについては推奨事項を確認することをお勧めしますが、簡単に言えば、フロートの動作はcss2（1998）とcss2.1（2005年の2か月後、2007年）の間で変化しました。 css2では、フロートに幅を設定することが必須でしたが、<！> quot; shrink-wrapping <！> quot; ff3にあるのはcss2.1です。つまり、2007年7月以前のブラウザは、div＃containerをビューポートの幅全体に広げたときに、製造時期に関連する推奨事項に準拠していることを意味します。 （Operaについては説明しませんが、常に独自のことを行っています。）

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

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

（問題を理解している場合）

ほとんどの場合、リストアイテムの幅を設定する必要はありません。 しかし（はい、ここにあります）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;
    }

このようにしない場合、リンクはすべての親に拡張されます。 LIST要素ではなくLINK;）この方法で<！> quot; min-width <！> quot;を設定します。 IE6を使用すると、他の問題は発生しません。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top