3

最後の項目が分離されて右に配置された水平メニューを構築しようとしています。これにより、最後の項目と最後の 2 番目の項目の間にロゴが配置されます。

それが最終結果です

Firefox、Opera (Presto)、さらには Redmond (9.0+) の汚いものでさえ、期待どおりにレンダリングします。しかし、WebKit (Chrome と Safari の両方で同じようにレンダリングされます) は、最後から 2 番目の項目の後にスペースが必要position: absoluteです。

<header>Logo</header>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Statistics</a></li>
        <li><a href="#">Data Management</a></li>
        <li><a href="#">Market Research</a></li>
        <li><a href="#">Web &amp; Apps</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

メニューの左側の部分 (最初から 2 番目の最後の項目、ロゴの左側) を固定幅にし、項目をコンテンツに必要な幅にするため、リストを astableとリスト項目を as で表示します。table-cellテキストは何にでも変更できます。そこまでは、すべて問題ありません。しかし、最後の項目に を指定するdisplay: block; position: absoluteと、WebKit はそのギャップ (例では白) をレンダリングします。

左: 非 Webkit。 右：ウェブキット

nav ul
{
    display: table;
    background: white; /* that's what you see in webkit */
}

nav ul li
{
    display: table-cell;
}

nav ul li:last-child
{
    display: block; /* "display: none;" works like I would expect */
    position: absolute;
}

ここにFiddleがあります。

テーブル内の要素の絶対配置はデフォルトの動作ではない可能性があるため、これが WebKit のバグであるかどうかはわかりません。一方、display: none私が期待するように動作します。どちらの場合も、スペース消費は 0 であるべきではありませんか?

WebKit のバグを知っている人はいますか? または、そのギャップを防ぐ方法を知っている人はいますか?

4

4 に答える 4

4

最後から 2 番目の要素「Web & Apps」を次blockの代わりに表示するように設定しtable-cellます。

nav ul li:nth-last-child(2) 
{
    display: block;
}

表示ブロック フィドル

于 2013-03-21T14:56:44.220 に答える
1

私はこの答えを他の人に押し付けましたが、「フレックスボックスはまだ広くサポートされていません」という応答をよく受けました。しかし、ここで再び行きます。Webkitが誤動作している理由は、の実装内でdisplay: table、DOMが意味的に宣言されたセル用のスペースを予約しているためです。これを実装する簡単な方法は、ロゴで行ったように、この要素を独自のオブジェクトに分割することです。

ただし 、これらを意味的にグループ化したままにしておきたい場合は、なぜそうしないのでしょうか。すべてコンテンツですよね。-これを克服するために、いつでもフレックスボックスモデルを使用できます。

これがその使用法を示すフィドルです。

変更点は次のとおりです。

nav ul
{
    display: box;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    -webkit-flex-direction: row;
    background: white; /* that's what you see in webkit */
    empty-cells: hide;
    table-layout: auto;
}

nav ul li
{
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
}

liこれで、アイテムは背景を適切にカバーします。これは、最後のアイテムが真のテーブルセルであるかのように扱われなくなり、テーブルの境界内にあるためです。Flexboxは、利用可能なスペースを埋めるための柔軟なレイアウトを提供します。多くの場合、これは「レイアウトの聖杯」問題の解決策と見なされますが、その使用はそれだけではありません。

したがって、別の「Flexboxが十分に広くサポートされていない」という応答が届いた場合、私は理解しています。しかし、サポートは日々改善されているので、私が出くわしたこれらすべての答えとしてそれを提案し続けます。

于 2013-03-19T20:58:17.220 に答える
0

少しCSSを編集しました。ご覧ください。これが必要な場合は、Fiddle

body
{
    position: relative;
    background: #bbbbbb;
    text-align: center;
    color: white;
}

header
{
    position: absolute;
    top: 10px;
    left: 630px;
    width: 80px;
    height: 60px;
    line-height: 60px;
    background: black;
    text-transform: uppercase;
}

nav
{
    position: absolute;
    top: 20px;
    left: 20px;
}

nav ul,
nav li
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul
{
    width: 200px;
}

nav ul li a
{
    display: block;
    padding: 1px;
    background: #0099ff;
    color: white;
    text-decoration: none;
}

nav ul li a:hover
{
    background: black;
}

nav li{
    margin-bottom: 5px;
    height: 25px;
    line-height:25px;
}
于 2013-03-11T13:41:46.633 に答える
0

絶対を使用している間、それに関連する/関連するすべてのものは、ピクセルに関して絶対でなければなりません。

nav + logo .header + .nav:last-child の合計が適切でなかったため、フィドルを更新しました。

フィドルリンク: http://jsfiddle.net/3TUk8/2/

それ以外の場合は、それを行う必要があります

nav ul
{
    display: table;
    background: #bbbbbb; /* that's what you see in webkit and same as bg color will hide it :) */
    list-style: none;
}

これで問題が解決することを願っています:)

于 2013-03-19T12:21:38.993 に答える