2

ラッパーdivを含むと900ピクセル程度の固定幅が定義される、単純なCSSレイアウトを考えてみます。したがって、その中のすべてが100％の幅に拡張されます。

ここには、1つのULと6つのリストアイテムを含むナビゲーションdivがあり、それらが水平方向に一列に表示されるように左にフロートされています。

各リストアイテムは、テキストコンテンツに正確に収まるようにさまざまに拡大する必要がありますが、メニュー全体が100％のスペースに収まるように、各アイテム間のスペースを共有する必要があります。

------------------------------------------------------
-N-        -N-          -N-               -N-      -N-
- -        - -          - -               - -      - -
- -ITEM1111- -ITEM222222- -ITEM33333333333- -ITEM44- -   
- -        - -          - -               - -      - -
------------------------------------------------------
<-------------------- 100% -------------------------->

それが実例であることを願っています！「N」は一定ですが、それに応じて100％の幅に合うように大きくなります（つまり、アクセシビリティのために、誰かがフォントサイズを大きくします）。

私はJavaScriptや画像を使用せず、CSSの純粋さだけを目指していますが、別の提案を喜んで受け入れます。

4

4 に答える 4

6

CSS3フレキシブルボックスレイアウトに基づくこれに対する私の簡単な解決策は次のとおりです。

スタイル

ul {
    padding: 0;
    width: 100%;
}

ul li {
    list-style: none;
    text-align: center;
    border: 1px solid Gray;
}

.flexmenu {
    display: -webkit-box;
    display: -moz-box;
    display: box;
}

.flexmenu li {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;

    -webkit-flex-basis: auto;
    -moz-flex-basis: auto;
    flex-basis: auto;
}

HTML

<div style="width:900px">
    <ul class="flexmenu">
        <li>short</li>
        <li>looooooooooooooooooooooooooooooong</li>
        <li>short</li>
        <li>short</li>
    </ul>
</div>

結果

ここに画像の説明を入力してください

于 2012-10-29T19:46:44.427 に答える
4

IE6 / IE7の互換性が重要でない場合、このレイアウトはdisplay：tableを使用すると簡単です。

http://jsfiddle.net/5SFG5/

于 2010-12-18T14:09:33.720 に答える
3

問題は、要素がフロートされると、その幅がコンテンツの実際の幅に縮小されることです。ただし、Javascriptを使用してこれを試すことができます（jsなしのバージョンをリクエストしたことは知っていますが、別のオプションは考えられません）。jQueryではかなり簡単なはずです。この構造を考えると：

<ul id="nav">
  <li>ITEM1</li>
  <li>ITEM2</li>
  <li>ITEM3</li>
</ul>

あなたはこのようなことをすることができます：

var width = 0, maxwidth = 900;
$('#nav li').each(function(){
  width += $(this).width();
});
var count = 2 * $('#nav').size();
var margin = (maxwidth - width) / count;
$('#nav li').css({
  marginLeft: margin + 'px',
  marginRight: margin + 'px'
});

厄介なコードで申し訳ありませんが、私は少し急いでいます：D。とにかく、基本的には、要素が占める全幅を確認し、li空いている量を確認して、li余白を埋めます。

于 2010-12-18T13:10:15.163 に答える
0

Nが定数幅と可変幅の両方になる方法がわかりません。

これが始まりです。

CSS

#nav { width: 100%; display: inline; }
#nav ul li {
                display: block;
                float: left;
                margin: 2%;
                width: 10%;
            }

 #nav ul li a {margin: 0 auto; display: block;}

html

<div id="nav">
        <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 1</a></li>
         </ul>
</nav>
于 2010-12-18T13:59:28.823 に答える