S5-L31-LOGO 與選單並排設計技巧

設計左邊是Logo,右邊是List的畫面

結構

<div class="wrap">
 <div class="header">
  <a href="#"><img src="logo.png" alt=""></a>
  <ul>
   <li><a href="#">首頁</a></li>
   <li><a href="#">關於我們</a></li>
   <li><a href="#">最新消息</a></li>
  </ul>
 </div>
</div>

.wrap{
 width: 960px;
 margin:0 auto;
}
.header{
 background-color: #f00;
 height: 100px;
}
img{
 height: 30px;
    margin-top: 20px;
}
ul{
 float:right;
 margin-top: 20px;
}
ul li{
 float:left;
 margin-right: 20px;
}

ul li a{
 color:#fff;
 text-decoration:none;
}

圖片確認高度後，可調整header高度

先將ul做float:right
內部的li再做float:left
並調整margin跟Logo對齊


<a>也可以float