# [CSS] 排版練習題-並排式選單

###### tags: `CSS`

<h2>1. 並排式選單(無連結)</h2>h2>


HTML語法

<div class="wrap">
   <div class="menu">  
      <ul >
      <li>產品介紹</li>
      <li>成功案例</li>
      <li>關於我們</li>
      </ul>
   </div>  
</div>
    

CSS語法

.menu {
    height: 30px;
    background: rgb(0,255,0,0.4);    
}

.menu li{
    float:left;
    width: 333px;
    text-align: center;
    line-height: 30px;
    height: 30px;
}

<h2>2. 水平式表單(含文字區塊連結)</h2>h2>

HTML語法

<div class="wrap">
    <div class="menu">  
      <ur>
        <li><a href="#">產品介紹</a></li>
        <li><a href="#">成功案例</a></li>
        <li><a href="#">關於我們</a></li>
      </ur>
    </div>  
</div>

CSS語法

* 在li層級使用display:inline變換至水平
* 在a層級宣告主要需求

.menu {
    height: 80px;
    background: rgb(0,255,0,0.4); 
}
.menu li {
    display: inline;
    float:left;
}
.menu li a{
    display:block;
    width: 333px;
    text-align: center;
    text-decoration: none;
    height: 80px;
    line-height: 80px;
   
}
.menu li:hover{
    color: antiquewhite
}

<h2>3. 水平式表單(僅文字連結)</h2>h2>


HTML語法

<a href="#">
    <img src="https://upload.wikimedia.org/wikipedia/zh/1/1a/IronManLegacy4.jpg" width="100px" height="100">
    </a>  
    
    <ul class="rightmenu">
        <li><a href="#">關於我們</a></li>
        <li><a href="#">產品資訊</a></li>
        <li><a href="#">成功案例</a></li>
    </ul>

CSS語法

* 僅有「文字」做超連結，將條件寫在li為主
* 宣告class向右移，li使用float至水平形式

.rightmenu{
    float:right;
}
.rightmenu li{ 
    float:left;
    margin-right: 40px;
    margin-top: 40px;
}
.rightmenu a{
    color:black;
    text-decoration:none;
}