似乎无法让我的导航栏旁边，我的标志

-6

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>

我真的需要一些帮助，这家伙

来源

2016-02-12 Samira Mc Queen

你必须做大量的变化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

来源

2016-02-12 03:04:21 ketan

你回答这个没有问，科坦问题？通过回答这样的低质量问题，你鼓励其他人喜欢它，从而降低SO的质量。 SO的使命是让互联网更好，但不是提供免费的“网页设计”或“修复我的代码”服务。你应该劝阻这些问题，而不是鼓励他们。 –

这是个问题。 “*似乎无法让我的导航栏旁边的我的标志”* – ketan

我知道，这就是为什么我会给他们机会学习如何发布。因为这是他/她的第一篇文章。 – ketan

似乎无法让我的导航栏旁边，我的标志

回答

相关问题