0

私は自分のウェブページにバナーを作ろうとしています.上部の幅700px、高さ80pxの部分です.

コードは次のようになります。

      <div class="container-narrow" style="heigth: 80px;">

        <img src="#" width="52" height="52" alt="my logo"  />

        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Contact</a></li>
        </ul>

      </div>

CSS:

    .container-narrow
    {
      margin: 0 auto;
      max-width: 700px;
      background: yellow;
    }

    ul
    {
      float: right;
      width: 100%;
      padding: 0;
      margin: 0;
      list-style-type: none;
    }

    a
    {
      float: right;
      width: 6em;
      color: black;
      text-decoration: none;
      padding: 0.2em 0.6em;
    }

    a:hover {color: #ccc; text-decoration: none;}

    li {display: inline;}

私が欲しいのは、画像と水平メニューが 80px の中央に垂直に配置されることです。左がロゴ、右がメニュー。

高さを設定してから、仕事を終わらせるためにパディング/マージンを設定しようとしましたが、ゴミのように感じます...

4

2 に答える 2

0

まず、外部 CSS がある場合は、HTML ブロックに追加の CSS を配置しないことをお勧めします。

<div class="container-narrow">

とにかくdivのクラス設定があるので、cssシートに高さスタイルを入れます。

第 2 に、CSS を適切に機能させたい場合、タイプミスをするのは苦痛です。そのため、heigthを使用する代わりに、height実際には div を 80 ピクセルの高さにします。

第三に、マージンには位置要素があります。それらを使用してください！

.container-narrow
    {
        height: 80px;
        margin: 0 auto;
        max-width: 700px;
        background: yellow;
    }
img
    {
        margin-top:14px;
    }

ul
    {
        float: right;
        padding: 0;
        margin: 0;
        list-style-type: none;
        margin-top:25px;
    }

a
    {
        width: 6em;
        color: black;
        text-decoration: none;
        padding: 0.2em 0.6em;
    }

a:hover {color: #ccc; text-decoration: none;}

li {display: inline;}

編集

これは主に垂直方向の配置に適用されます。margin:auto水平方向に自動中央揃えする場合は、この概念を利用できます。これが可能なのは、ページがブラウザーの幅を超えて拡張できないためです (ブラウザーの高さは、デフォルトの動作としてスクロールを使用できるように拡張できます)。

于 2013-06-13T12:05:50.180 に答える