0

さて、私は自分が取り組んでいるプロジェクトのウェブサイトを作り始めました。現在、自分のWebサイトのレイアウトを整理していますが、ナビゲーションバーでスタックしています。

ナビゲーションバーをWebサイトの100％に広げ、ボタン（画像）を水平/垂直に中央に配置したいと思います。

私が持っているものはうまくいきます...しかし、私はそれを最も効率的な方法でやっているかどうか疑問に思っていますか？

これが私のhtmlです。

<div id="wrapper">
  <div id="header">

    <div id="navbar_left">
    </div>

    <div id="navbar_buttons">
        <img src="../Originals/button_home.png" />
        <img src="../Originals/button_logo.png" />
    </div>

    <div id="navbar_right">
    </div>

  </div>
</div>

これが私のCSSです：

#wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

#header {
    height: 123px;
    width: 100%;
    background-image: url(../../Originals/header_background.png);
}

#navbar_left {
    width: 25%;
    height: 123px;
    float: left;
}

#navbar_buttons {
    height: 123px;
    width: 50%;
    float: left;
    line-height: 123px;
    text-align:center;
}

#navbar_buttons::after {
    content: ".";
    visibility: hidden;
}

#navbar_right {
    width: 25%;
    height: 123px;
    float: left;
}
4

1 に答える 1

0

マークアップとCSSを簡素化する方法の一例については、このjsFiddleを確認してください。それはinline-blockあなたの画像に利用されます。

HTML（header要素を使用）：

<div id="wrapper">
  <header>
    <img src="http://placehold.it/200x100" />
    <img src="http://placehold.it/200x100" />
  </header>
</div>

そしてCSS：

header {
    text-align: center;
    background: #222;
}
header img {
    display: inline-block;
    vertical-align: bottom;
}

adivはdisplay: blockデフォルトであるため、100％の幅を指定する必要はありません。使用可能な幅を埋めます。margin同様に、またはは何もしていないので、を宣言する必要はありませんpadding。

また、固定の高さを宣言することは避けたいと思います。親divがその中身の高さまで拡張できるようにするだけです。

于 2013-03-05T10:53:06.113 に答える