S5-L30-設計並排式選單

如何做出並排選單

使用<ul>及<li>來設計

將ul/li放在div.topmenu中

ul>li*5>a + tab展開

<div class="topmenu">
 <ul>
  <li><a href="#">首頁</a></li>
  <li><a href="#">財經</a></li>
  <li><a href="#">運動</a></li>
  <li><a href="#">政治</a></li>
  <li><a href="#">娛樂</a></li>
 </ul>
</div>

前面加上CSS Reset (Codepen可於setting中直接設定)
消除<li>前方的實心圓及一些預設的樣式

接著我們要讓<li>並排

<li>是block元素
希望要讓他並排=>使用float

.topmenu ul li{
 float:left;
}

但會發現<li>做float之後
topmenu後面的元素會擠上來

2個解法：
(1)設定topmenu有高度
(因為li設定為float，會導致topmenu看不到，因此高度變成0)

或
(2)在topmenu最後面加上空白div，設定clear:both



<a>是inline元素
要讓它有寬度跟高度的話
要設定為display:block
(這樣可以讓滑鼠在區塊旁邊空白也可以點到)


讓文字
消除下底線：
text-decoration：none


水平置中：
text-align:center

垂直置中：
有多種做法
(1)<a>高度為50px,設定line-height也是50px
(2)用padding-top/left：10px