css - 水平导航大小问题

Question

我正在尝试创建类似于链接 [1] 的水平导航，但它看起来像链接 [2]。如何按照我想要的方式对其进行编码？包装纸的宽度为 80em。每个链接为 155x76 像素。每次我将该数字转换为 em 时，它都会给我一个更小的尺寸。我仍然必须习惯在 em 中计算。

谢谢！

[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 li”下的 em 太高了。如果您想要类似于链接 1 的内容，请使用以下命令：

margin: 0.1em;

工作示例

Answer 2

谢谢你的协助。我尝试了您的代码，但我认为我的测量结果不正确，它将所有内容都折叠到下一行。我最终改变了导航。