0

<nav>应与徽标和标语下方的左侧对齐。但是，尽管尝试对两者都这样做，但margin它padding仍然位于徽标上方并位于页面中心。非常感谢任何有关如何纠正此问题的帮助。

HTML

<header>
    <div id="logo">
        <a href="#"><img src="img/logo.png" alt="GEC logo" /></a>
    </div>
    <div id="slogan">
        <h1>Revolutionizing Potential</h1>
    </div>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Coaching Services</a></li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </nav>
</header>

CSS

/* Header */

header {
    margin-top: 95px;
}

#logo {
    float: left;
}

#slogan {
    float: right;
    margin-top: 90px;
}

nav ul li {
    display: inline;
    float: left;
}

nav ul li a {
    padding-right: 20px;
}

nav ul li:last-child {
    padding-right: 0;
}
4

2 回答 2

1

在您的 CSS 中添加：

nav {
    clear:both;
}

jsFiddle 示例

于 2012-07-26T16:22:30.870 回答
0

首先，我总是为所有元素提供默认宽度和高度。

nav 是一个内联元素，而不是一个块。为了避免使用明确的修复，您应该在徽标和标语周围放置一个 div 元素。像这样：
HTML

<header>

  <div id="header_top">
    <div id="logo">
        <a href="#"><img src="img/logo.png" alt="GEC logo" /></a>
    </div>
    <div id="slogan">
        <h1>Revolutionizing Potential</h1>
    </div>
  </div>

    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Coaching Services</a></li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </nav>
</header>

现在你可以给 header_top div 一个显示块和一个 overlfow:hidden。
这将使 header_top div 与其内容一起增长。

现在给你导航一个显示：块样式，它就完成了

我在我的笔记本上进行了本地测试，它就像一个魅力:)

添加：CSS 

#header_top{
display: block;
overflow: hidden;
}
nav{
display: block;    
}
于 2012-07-26T16:34:48.357 回答