1

更新:以下の回答のいずれかに従って、HTML と CSS を簡略化しました。ただし、問題はまだ発生しています。

私は次のような作業用のナビゲーションを持っています:

                item11item2item3    Centered    item4item5item6

アイテム間にパディングを追加したいので、次のようになります。

       item1     item2     item3    Centered    item4     item5     item6

左の項目は右詰めです。右側の項目は左詰めです。

問題

  • float: right;リストを正当化するために使用すると、 が得られitem3 item2 item1ます。
  • float: left;コンテナの幅を に設定するとauto、正しいレイアウトが得られますが、pxパディングを使用する場合のみです。

  • %パディングを使用するpadding-left: 3%;と、壊れて次のようになります。

              item1     item2       Centered    item4     item5     item6
          item3

ここに私のHTMLがあります:

<div class="container">
    <nav>
        <ul class="left">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
        <ul class="center">
            <li>Centered</li>
        </ul>
        <ul class="right">
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
        </ul>   
    </nav>
</div>

ここに私のCSSがあります:

/* Reset */

html, body, nav, li {
  margin: 0; padding: 0; border: 0;
}

li {
  list-style-type: none;
  list-style-position: outside;
}

/* Styles */

.container {
  width: 100%;
  height: auto;
}

nav {
    width: 80%;
    margin: 0 auto;
}

nav > ul.left {
    position: absolute;
    right: 55%;
}

nav > ul.left > li {
    float: left;
    padding-right: 5%;
}

.center {
    position: absolute;
    left: 45%;
    width: 10%;
}

.center li {
    text-align: center;
}

nav > ul.right {
    position: absolute;
    left: 55%;
    width: 45%;
}

nav > ul.right > li {
    float: left;
    padding-left: 5%;
}

ノート：

  • 左右のナビゲーション項目の幅が同じでなくても、「中央揃え」を完全に中央に配置するために、絶対配置とコンテナーを使用しています。
  • 柔軟なレイアウト（レスポンシブ）であるため、％ベースの幅を使用しています
  • 上記のコードは問題なく動作しますが、パディングのパーセンテージをベースにして柔軟性を持たせたいと思っています。

したがって、div は幅を正しく継承し、ピクセルを使用する場合はパディングを考慮しているように見えますが、パーセンテージを使用する場合はそうではありません。li-containerこれは典型的な動作ですか？解決策は何ですか？

試してみたい場合に備えて、jsFiddleを次に示します。

追加の更新:

主な問題は、「左」項目を右揃えにする必要があるようです。使用するfloat:rightと逆順になり、良くありません。左の項目で使用するfloat:leftと、順序は正しいですが、コンテナーから明示的な幅を削除する必要があります。そうしないと、項目が右揃えになりません。明示的なコンテナー幅を削除すると、発生している問題が発生します。

4

2 に答える 2

1

編集：これが新しい解決策です。これが期待どおりに見えることを願っています。;)

HTML

<nav>
    <ul class="left">
        <li>Item 1 longer longer</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <ul class="centered">
        <li>Centered</li>
    </ul>
    <ul class="right">
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>
</nav>

CSS

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

nav {
    position: relative;
    min-width: 700px;
}

nav > ul {
    width: 100%;
    background: red;
}

nav > ul > li {
    display: inline-block;
    text-align: center;
    background: green;
    color: white;
}

nav > ul.centered {
    position: absolute;
    left: 40%;
    width: 20%;
    background: orange;
}

nav > ul.centered > li {
    display: block;
    background: orange;
}

nav > ul.left {
    position: absolute;
    left: 0;
    max-width: 40%;
}

nav > ul.left > li {
    float: right;
    padding: 2%;
}

nav > ul.right {
    position: absolute;
    left: 60%;
    max-width: 40%;
}

nav > ul.right > li {
    float: left;
    padding: 2%;
}

デモ

購入前にお試しください

アップデート

壊れることなく正しい順序ですべてのものを並べる唯一の方法は、を使用することdisplay: inline-blockです。それを示すために、左側のみを更新しました。

最終的な考え:これは決して壊れないので、 - 要素に を設定する必要があります。そうしないとmin-width、<nav>小さすぎる画面で要素が重なります。浮動要素の親コンテナーの幅が小さくなりすぎて次の行に割り込むという以前に経験したことは、浮動要素の予想される動作です。

更新された CSS

nav > ul.left {
    position: absolute;
    left: 0;
    max-width: 40%;
    text-align: right;
    white-space: nowrap;
    line-height: 0;
    font-size: 0;
}

nav > ul.left > li {
    display: inline-block;
    padding: 10%;
    line-height: auto;
    font-size: 12px;
}

デモ

試すdisplay: inline-block

これも私の最初のソリューションへのリンクです。

于 2013-08-27T15:19:40.037 に答える
1

そのフィドルでChromeの要素インスペクターを使用し、パディングを3％オン.left .liにして、これを収集します：

.left .li-containerの計算された幅: 128px

各個人liの幅: 43px

が 3つあるli--> 3 * 43 = 129px

これにより、子 li の幅が親コンテナーの幅を拡張し、新しい行に折り返されます。したがって、おそらく、そのパーセンテージ値から実際の幅を計算する際に四捨五入する必要があります。

これを補うために、現時点ではjQuery/JSソリューションしか考えられませんが、あなたがそれを望んでいるとは思えず、純粋なCSSでそれを望んでいます.

注: これをコメントとして追加するだけですが、50 担当者が必要なため、残念ながらできません。完全な回答でなくてすみません！

于 2013-08-27T15:23:45.467 に答える