我使用哪个属性将我的徽标与导航对齐?

时间:2012-11-29 00:04:27

标签: html css html5 css3 header

几分钟前我问了一个相关的问题,通过这个问题,我得到了这个更新的代码,但我无法弄清楚如何让我的徽标显示在左侧。

HTML:

 <header>
 <img src="/images/logo.png" height="50px" id="front" />
 <nav>
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li class="last"><a href="#">Contact</a></li>
 </ul>
 </nav>
 <div id="second_line"></div>
 </header>

CSS:

 body {
 margin: 0;
 }
 header {
 background-color: #009000;
 height: 85px;
 position: relative;
 }
 #front {
 margin-left: 20px;
 margin-top: 20px;
 }
 nav {
 float: left;
 margin-top: 30px;
 }
 ul {
 margin: 0;
 padding: 0;
 float: left;
 }
 ul li {
 list-style-type: none;
 float: left;
 border-right: 2px solid black;
 padding-right: 5px;
 padding-left: 5px;
 }
 ul li.last {
 border-right: 0px;
 }
 #second_line {
 margin-top:10px;
 height:3px;
 background-color: #FECE2C;
 }

如何解决此问题,使徽标位于左侧而非右侧?

谢谢!

3 个答案:

答案 0 :(得分:1)

尝试将其添加到样式表中:

header > img {float:left;}

答案 1 :(得分:1)

您可以尝试将<nav>调整为inline-block

nav {
    display: inline-block;
}

Example

答案 2 :(得分:0)

demo

你错过了添加这种风格。

header img{float:left;}