7

display：table / table-cell：autoレイアウトのul / liメニューがあり、コンテナを埋めるために引き伸ばされ、メニュー項目間に水平方向のスペースが分散されています。追加のUI要素を最後のメニュー項目に揃える必要があります。これは、その要素を最後のli要素の子として追加し、100％幅にすることで実現できます。

ただし、このUI要素（言語セレクター）を部分的にメインコンテンツの外側に配置する必要があるため、これを相対的な右に配置します：-10px。ただし、副作用として、メニュー要素と比較して、セレクターの左端が右に移動します。通常はセレクターdivの幅を10px増やしますが、100％なのでそれはできません。また、親liの幅は、そのテキストの内容によって決まります。

純粋なCSSを使用してこれを正しく行う方法はありますか？div全体を埋めるために子コンテンツが必要なため、セレクターにパディングを追加できません。

<div class="menu">
    <ul>
        <li><a href="#">first</a>
        </li>
        <li><a href="#">second</a>
            <div id="selector">
                <a href="#">EN</a>
                <a href="#">FR</a>
            </div>
        </li>
    </ul>
</div>

これが実際の例です：http： //jsfiddle.net/hJXng/13/

4

2 に答える 2

11

サポートするブラウザに応じて、簡単なオプションはcalcを使用することです。

width: calc(100% + 10px);

参照：使用できますかcalc()
例：http：//jsfiddle.net/hJXng/19/

于 2013-03-03T09:02:58.400 に答える
0

xpyの答えがどこに行ったのかはわかりませんが、彼/彼女のコメントはついに私の一日を作りました。「display：table」を含むdivはChromeのパディングを埋めなかったのに対し、「display：block」は埋めたため、2つのラッパーdivを追加する必要がありました。したがって、100％幅のブロックdivを別のパッド付きdiv内に絶対配置することは実際に機能します。

#selector-full {
    width: 100%;
    position: absolute;
    display: block;
    right: 0;
}

フィドル： http： //jsfiddle.net/cPDd6/4/

于 2013-03-06T11:35:05.670 に答える