Question

我正在尝试创建类似于链接[1]的水平导航，但它看起来像链接[2]。如何按照我希望的方式对其进行编码？包装的宽度是80em。每个链接是155x76px。每当我将这个数字转换为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”下的人太高了。如果你想要一些看起来像链接1的东西，请使用：

margin: 0.1em;

Working example

Answer 2

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

水平导航尺寸问题

2 个答案: