1

序文: 私は一般的に UI の専門家ではないので、CSS について大きな誤解がある場合はご容赦ください。この質問は、数時間の調査/壁に頭をぶつけた後のものであることを知っておいてください:)

基本的に、私がやろうとしているのは、未知の数の要素を、既知の幅の2つの要素の間の未知の幅のスペースに引き伸ばすことです.

入力しているうちに、どれだけクレイジーに聞こえるかがわかったので、これをグラフィカルに実行してみましょう。

html
|-------------------------------------------------------------------------|
|   #container                                                            |
|   |-----------------------------------------------------------------|   |
|   |#header                                                          |   |
|   ||---------------------------------------------------------------||   |
|   || #logo   | #menu                                     | #social ||   |
|   ||         | |---|  |---|  |---|                 |---| |         ||   |
|   ||         | | A |  | B |  | C |  ...  ...  ...  | N | |         ||   |
|   ||         | |---|  |---|  |---|                 |---| |         ||   |
|   ||---------------------------------------------------------------||   |
|   |                                                                 |   |
|   |#body                                                            |   |
|   ||---------------------------------------------------------------||   |
|   ||                                                               ||   |
|   ||---------------------------------------------------------------||   |
|-------------------------------------------------------------------------|

どこ：

  • #container中央に配置され、ドキュメントの幅の 80% を占めます
  • #logo、#menu、および#socialはそれぞれ<div/>sに含まれます
  • #logo#social既知の幅があります。#menuではない
  • | A |...内の要素の| N |数は不明です<li/><ul/>

HTML は次のようになります。

<body>
    <div id="container">
        <div id="header">
            <div id="logo">Logo here</div>

            <div id="nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Home</a></li>
                </ul>
            </div>

            <div id="social"><a href="#">Link</a><a href="#">Link</a></div>

        </div>
        <div id="body">&nbsp;</div>
    </div>
</body>

と要素A..Nの間の残りのスペースにメニュー項目を広げることができません。それらは一緒にスムーズに処理されるか、.#logo#social#container

私がすでに試したいくつかのこと：

  • 使用display: inline-table;（フィドル）
  • <li/>要素をインラインで表示し、#menu要素の幅を 100% にする ( fiddle )
  • これらのバリエーションの束

私ができない/やろうと思わないこと:

  • メニュー項目を<table/>
  • あらゆる種類の JavaScript アプローチ
  • CSScalc()関数の使用

最後に 1 つ注意してください。これらのメニュー項目に割り当てられたスペースに十分なスペースがないことは心配していません。#menuただし、オーバーフローした場合は、内部(つまり、Aメニュー項目の下)の別の行にオーバーフローすると予想されます。

これには純粋な CSS ソリューションが必要です...それは何ですか?

4

1 に答える 1

3

セマンティックではないので、要素を使用したくないの<table>は当然です..しかし、それが、セマンティックな意味を保持しながら、要素をテーブル要素のように見せるために構築されたプロパティのセットが CSS にある理由です。

基本的に、コンテナ要素を に設定するとdisplay: table;、子要素を または のいずれかに設定できますdisplay: table-row;。display: table-cell;

これはあなたにとって何を意味しますか？

表のセルのセットは常に、親の 100% の幅と親の 100% の高さで塗りつぶされます。これは通常、明示的に設定されていない限り、最大の子によって決定されます。

したがって、これを念頭に置いて、ヘッダー要素#headerをに設定する場合は、 、、およびを にdisplay: table;設定できます。ロゴとソーシャル ブロックの固定幅の設定が尊重されるため、ナビゲーション ブロックが残りのスペースを埋めます。#logo#nav#socialdisplay: table-cell;

nav ブロック内の順序付けられていないリストulは、2 番目のコンテナーとして機能できます。もう一度 に設定するとdisplay: table;、内容が nav ブロックの幅いっぱいに表示されます。li要素を同様に設定するdisplay: table-cell;だけで、目的の効果が得られるはずです。

このデモを参照してください:

http://jsfiddle.net/5RvCC/

  • テーブル セル スタイルの要素の素晴らしいボーナスは、vertical-alignプロパティを許可することです。これにより、垂直方向のセンタリングが非常に簡単になります。これは常によくある質問のようです。
于 2013-10-23T03:23:11.423 に答える