1

次の問題に遭遇しました。ページの上部に向かってスタイルを設定したい水平メニュー バーがあります。そのhtmlは次のようになります。

<body>
  <div id="container">
    <div id="left">
    </div>
    <div id="center">
      <!-- stuff above header here ... -->
      <div id="header">
        <ul>
          <li class="first"><a href="#">Products</a></li>
          <li><a href="#">Customers</a></li>
          <li><a href="#">Invoices</a></li>
        </ul>
      </div>
      <!-- stuff below header here ... -->
    </div>
    </div id="right">
    </div>
  </div>
</body>

次のように表示したい：

+--------------------+-----+--------------------+-----+--------------------+
+                    +     +                    +     +                    +
+      Products      +  /  +      Customers     +  /  +      Invoices      +
+                    +     +                    +     +                    +
+--------------------+-----+--------------------+-----+--------------------+

基本的に、次のものが必要です。

  1. ページ全体の中央 (id="center") は固定幅 (960px) で、拡張可能な可変サイズのサイドバー (id="left" および id="right") があります。

  2. ナビゲーション バーは中央の div にまたがっているため、幅も 960px です。

  3. ナビゲーション バーには幅 960 ピクセルの背景画像があり、既知の高さがあります (ナビゲーション バーの高さが既知であるという事実が CSS スタイルに違いをもたらすかどうかは不明です)。

  4. 「/」と書かれた部分は、この「/」文字を表示するイメージです。これらの画像は、ナビゲーション バーと同じ高さで、幅は 30px です。

  5. テキストの幅の違いに関係なく、製品、顧客、および請求書の各リンクを含む領域を同じ幅にしたい。それぞれの幅は 300px にする必要があります。

  6. リンクの 1 つに非常に長い名前がある場合 (たとえば、見出しの 1 つに「製品」だけでなく「製品リストの非常に長い見出し」がある場合、テキストは下の行に折り返されるべきではありませんが、代わりに切り取る必要があります (おそらく、テキストの最後に省略記号を表示します). 実際には、中央の div の幅が固定されていることを考えると、テキストが常に完全に収まるようにする必要があるため、小さいフォントを割り当てることが不可欠です.

  7. Products、Customers、および Invoices の各リンクを、境界ボックス内で水平方向だけでなく垂直方向にも中央に配置したいと考えています。

それがすべてです、これが私がやろうとしてきたすべてです。

しかし、テキストを中央に配置する際に問題が発生しています。その理由の 1 つは、プロパティを要素 (たとえば、a、その親 div、またはその祖父母 div) に適用する必要があるかどうかがわからないためです。プロパティが DOM ツリーをずっと下まで継承されるか、または継承が親子関係に関与するように DOM ツリーでどの要素が隣接しているかにのみ依存するかどうか。

これまでのところ、次のように 1. を処理する方法を見つけました。

  div#left { float: left; }
  div#right { float: right; }
  div#center { width: 960px; margin: 0px auto; }

また、PSD/JPG モックアップからヘッダーの背景とヘッダーの仕切りをスライスしました。

ただし、残り、特に 5. と 7. を機能させることができません。

助言がありますか？

OK、これが私がやったことです：

この場合、画像はセパレーターでありアイテム インジケーターではないため、ul 要素内に list-style-image を使用して設定することはできません。間違った効果。

したがって、私の解決策はクリアすることでした。含まれている div の両方で、それ自体が行に表示されるようにします。次に、ul のリスト スタイルを none に設定します。W がヘッダー div の幅で、メニューに N 個のハイパーリンクがある場合、次のように計算します。

floor({W - [(N - 1) * SEPARATOR_IMAGE_WIDTH]} / N) ブロックを含む各リンクの幅を計算し、各 li 要素に設定します。また、SEPATATOR_IMAGE_WIDTH のパディングと、最初のものを除く各 li の背景を設定します。

次に、ul、li の高さ、および区切り画像の高さへのリンクを設定して、画像が崩れないようにします。常に 40px を書き留めたくない場合は、行の高さの代わりに inherit 属性を使用できます。

リンク内のテキストをテキスト整列で中央に配置し、上部パディングを使用してテキストを上から少し下に移動します (これらの 40 ピクセル内でテキストを垂直方向に中央に配置するより良い方法が見つからなかったため、ここでアイデアを歓迎します)

  div#header_middle { clear: both; }
  div#header_middle ul { list-style: none; background: url(images/header_middle_navbar_background.jpg); height: 40px; }
  div#header_middle ul li { float: left; padding-left: 14px; background: url(images/header_middle_entryseparator.jpg) no-repeat; height: 40px; }
  div#header_middle ul li.first { padding-left: 0px; background: none; }
  div#header_middle ul li a { display: block; float: left; text-transform: uppercase; font-size: medium; width: 110px; text-align: center; padding-top: 8px; height: 40px; color: white; }
4

1 に答える 1

0

ここから始めて、少なくともそのリストからさらにいくつかの数字をチェックできることを示してください。

div#header {background-color: green; text-align: center;}
#header li { display: inline-block; }
#header li a { width:300px; display: block; text-align: center; background-color: red;}

ところで、水平ナビゲーション バーを Google で検索してコピーしてみませんか?

于 2012-07-17T12:07:19.500 に答える