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

【问题标题】：Text-align: center not working on jQuery ul drop down menu文本对齐：中心不适用于 jQuery ul 下拉菜单
【发布时间】：2015-09-01 06:42:18
【问题描述】：

我创建的网站上的 jQuery 下拉菜单没有正确地将无序列表 (ul) 中的文本居中，我不明白为什么，在具有类似布局的 site I made 上可以完美地工作。看到其他堆栈溢出答案，但没有一个回答我的情况。 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/ 上。

【问题讨论】：

标签： html css text-align

【解决方案1】：

您的徽标导致了问题：

.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)

【讨论】：

这确实帮助了前三个（谢谢！），但最后两个仍然没有居中
哦，右边的汉堡图标可能是同样的问题（浮动：右）。我去看看
是的 - 在这里也将 float:right 更改为 position:absolute ，现在它可以完美运行了。

【解决方案2】：

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

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

【讨论】：

我知道，我这样做不仅是文本是一个链接，而是整个
（占据整个屏幕）。如果我遇到任何错误，但我一定会处理它，但到目前为止它似乎工作正常。

不，但说真的，你不能只是在你的 html 中放置一个无序列表，然后就像“哦，我不需要列表项。我只使用锚点。”如果在列表中使用列表项会给您带来错误或不需要的行为，那么您正在编写错误的代码。

嗯。例如，假设

是 div。我希望链接指向整个 div，而不仅仅是 div 内的文本，就像位于

内时那样。这有意义吗？