Question

我正在为网站创建水平导航。下面是一个标记的例子（我很少控制它，因为它是为我生成的）。

<div id="menu">    
    <ul class="menu">
        <li class="menu"><span><a>Link 1</a></span></li>
        <li class="menu"><span><a>Link 2</a></span></li>
        <li class="menu"><span><a>Link 3</a></span></li>
        <li class="menu"><span><a>Link 4</a></span></li>
        <li class="menu"><span><a>Link 5 a long one</a></span></li>
        <li class="menu" ><span><a>Link 6 a long one</a></span></li>
        <li class="menu"><span><a>Link 7</a></span></li>
        <li class="menu"><span><a>Link 8</a></span></li>
    <ul>
</div>

我遇到的问题是我有8个导航项目，每个项目中有多个单词。为了使其适合，我将物品的宽度限制为12.5％。这导致一些菜单项是两行文本而其他菜单项是一行。我试图得到它所以每个标签都是相同的高度，例如。 75px高。这是因为它们都具有相同的活动区域作为菜单项。最重要的是，我试图垂直对齐文本。以下是我正在尝试的CSS：

#menu { 
    text-align:center; 
}

#menu ul {
    display:inline-block;
    margin:0 auto;
    list-style:none;
}

#menu li {
    display:inline;
    height:2ems; 
}
#menu li a {
    display:block; 
    float:left;
    width:12.5%; 
    text-decoration:none; 
    padding:0; 
    height:75px; 
    text-align:center;
}

是否有人能够指出我哪里出错了？文本不是垂直对齐的，并且a标签不是75px高，而是文本的高度。

CSS HTML多行导航示例

0 个答案: