수평 탐색 크기 문제

Question

링크 [1]과 비슷한 가로 탐색을 만들려고하지만 링크 [2]처럼 보입니다. 어떻게 보이게 할 수 있습니까? 래퍼의 너비는 80em입니다. 각 링크는 155x76 픽셀입니다. 그 번호를 안에 숨길 때마다, 그것은 나에게 더 작은 크기를줍니다. 나는 여전히 계산에 익숙해 져야한다.

감사합니다.

[1] http://vivianaa.siteground.net/Beatles/layout.png [2] http://vivianaa.siteground.net/Beatles/html.png

.menuarea { 
    border: 0.08em solid #080; 
    background-color: #81898e; 
    } 

.menulist{ 
    text-align:center;  
    } 

.menulist li{ 
    display:inline-block; 
    text-align:center; 
    padding: 1em 2em; 
    background-color:#d9b607; 
    margin: 0 1.100em; 
    } 

.menulist li:hover {background-color:black;} 

.menulist li a:active {color:#d9b607;} 

.menulist li:active {background-color:81898e;} 


<nav class="menuarea"> 

       <ul class="menulist"> 
        <li> 
         <a href="index(2).html">the beatles</a> 
        </li> 
        <li> 
         <a href="john.html">john</a> 
        </li> 
        <li> 
         <a href="paul.html">paul</a> 
        </li> 
        <li> 
         <a href="george.html">george</a> 
        </li> 
        <li> 
         <a href="ringo.html">ringo</a> 
        </li> 
       </ul> 
      </nav> 

Answer 1

당신은 ".menulist 리"의 안에있어 너무 높은 . 당신이 링크를 하나처럼 보이는 무언가를 원하는 경우에, 이것을 사용 :

margin: 0.1em; 

Working example

Answer 2

감사 저를 도와. 나는 당신의 코드를 시험해 보았습니다. 그러나 제 측정이 모든 것이 다음 줄로 넘어 졌다고 생각합니다. 나는 네비게이션으로 바뀌었다.