Question

<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;
}

Answer 1

给你的CSS添加：

nav {
    clear:both;
}

<强> jsFiddle example

Answer 2

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

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;    
}

<ul> <li>居中，没有向下移动..不确定为什么/如何修复</li> </ul>

2 个答案: