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

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 がそのコンテンツとともに成長します。

これで、nav に display:block スタイルを指定すれば完了です

ノートブックでローカルにテストしたところ、魅力的に機能しました:)

追加: CSS 

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