Question

Codes

body{ 
    margin: 0;
}

.logo {
    text-indent: -999999px;
    background: url('logo3.png');
    width: 216px;
    height: 219px;
}

.header{
    width: 100%;
    height: auto;
    background-color: #eef3f5;
    padding-top: 24px;
}
.headerContent {
    width: 1024px;
    height: auto;
    margin: 0 auto;
}
.headercontent a img{
    width: 659px;
    height: 144px;
    margin: 0px auto;
    display: block;
}
.nav {
    height: 40px;
    background: #0000ff;
    margin-top: 20px;
    float: right;
}
.nav ul{
    margin: 0;
    padding: 0;
}
.nav ul li{
    list-style: none;
}
.nav ul li a{
    text-decoration: none;
    float: left;
    display: block;
    padding: 10px 20px;
    color: black;
}
.nav ul li a:hover{
    color: white;
}
.headerbreak {
    width: 100%;
    height: 0;
    border-bottom: 2px solid #ff0000; 
}

  
<title> Grenada Down Syndrome Association</title>
    
    
    
<body>
    <div class="header">
    <div class="headerContent">
        <a href="#">
            <img src="logo3.png" alt="Grenada Down Syndrome Association"/>
        </a>
        
    <div class="nav">
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="aboutus.html">About Us</a></li>
            <li><a href="events.html">Events</a></li>
            <li><a href="contact.html">Contact Us</a></li>
          </ul>
        
            </div>
        </div>
        <div class="headerbreak"> </div>
    </div>
</body>
</html>

我真的需要帮助这些人

Answer 1

您必须在css中进行大量更改。

首先，你要给.headerContent的宽度减去它，或者删除徽标旁边的颜色。

然后使用display:inline-block。

给出以下css：

.headerContent > a {
    display: inline-block;
    vertical-align: top;
}


.nav {
    background: #0000ff none repeat scroll 0 0;
    display: inline-block;
    height: 40px;
    vertical-align: top;
}

.nav ul li{
    list-style: none;
    float: left;
}

<强> Working Fiddle

似乎无法将我的导航栏放在我的徽标旁边

1 个答案: