0

好的，所以我已经开始为我正在做的一个项目创建一个网站。我目前正在整理我的网站的布局，但卡在导航栏上。

我希望我的导航栏覆盖 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

查看这个 jsFiddle以了解如何简化标记和 CSS 的一个示例。它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;
}

请注意，默认情况下是 a div，display: block因此您无需指定 100% 的宽度：它将填充可用宽度。同样，您不需要声明 a marginorpadding因为他们没有做任何事情。

如果可以避免，我也会避免声明固定高度：只需让您的父div级扩展到其内容的高度即可。

于 2013-03-05T10:53:06.113 回答