水平選單的CSS排版

by ShadowKao

HTML

<body>
 
    <ul>
		<li>
		   <a href="#">AAA</a>
		</li>
		<li>
	     	<a href="#">AAA</a>
		</li>
		<li>
	    	<a href="#">AAA</a>
		</li>
		<li>
             <a href="#">AAA</a>
		</li>
		<li>
		      <a href="#" class="last_a">AAA</a>
		</li>
 </ul>
		 
	</body>

CSS

body{ 
  
	 padding:0;
	 margin:0; 
     /*body負責讓選單水平垂直置中*/
	 height:100vh;
	 display:flex;
	 justify-content:center;
	 align-items:center; 
}
 
ul{
   /*ul預設會有些微的margin、padding*/
	margin:0;
	padding:0;
	list-style:none;  
}
ul > li{  
/*讓選單變成水平的關鍵*/
  float:left;
 
}
ul > li > a{
	  
	/*a元素預設display:inline;不支援width、height*/
	display:inline-block;
	text-decoration:none;
	width:100px;
	height:50px;
	line-height:50px;/*文字垂直置中*/
	text-align:center;/*文字水平置中*/ 
	border:1px solid #d2d2d2;
	border-right-width:0px;
	color: #434eae;/*前景色深藍色*/
	background: #fff;/*背景色白色*/
}
ul> li > a.last_a{
	 
	border-right-width:1px; 
}
ul > li > a:hover{
	/*當滑鼠hover時的變化*/
	color: #fff;/*前景色白色*/
	background: #434eae;/*背景色藍色*/
}