文本对齐：中心不适用于 jQuery ul 下拉菜单

Question

我创建的网站上的 jQuery 下拉菜单没有正确地将无序列表 (ul) 中的文本居中，我不明白为什么，在 site I made 上看到类似的布局非常有效。看到其他堆栈溢出答案，但其中 none 回答了我的情况。 HTML:

 <div class="menu">
        <ul class="menulinks">
            <a href="#"><li> Music </li> </a>
            <a href="#"><li> Trending </li> </a>
            <a href="#"><li> Interesting </li> </a>
            <a href="#"> <li>Funny </li> </a>
            <a href="#"> <li> Events </li> </a>
        </ul>
    </div>

CSS:

.menu {
background-color: #EEEEEE;
}
.menulinks {
/* text-align: center; */
width: 100vw;
margin-left: 0;
padding-left: 0;
}
.menulinks li {
text-align: center;
list-style-type: none;
padding-top: 1vh;
padding-bottom: 1vh;
}

我所有的代码都在 http://jsfiddle.net/3840yv1y/4/ .

Answer 1

您的列表标记无效。总是 ul > li > a

<ul>
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
</ul>

更多信息：http://www.w3schools.com/html/html_lists.asp

Answer 2

您的徽标导致了问题：

.logo {
    padding-left: 2%;
    padding-top: 2vh;
    padding-bottom: 2vh;
    float: left;
}

由于它的样式为 float: left; 并且出现在菜单顶部项目的左侧，因此下拉列表中的前几个项目被挤到了右侧。

绝对定位将为您解决此问题：

.logo {
    padding-left: 2%;
    padding-top: 2vh;
    padding-bottom: 2vh;
    position: absolute;
    top: 0;
    left: 0;
}

(Updated JSFiddle)

文本对齐：中心不适用于 jQuery ul 下拉菜单

Text-align: center not working on jQuery ul drop down menu

html

css

text-align