Question

我创建的网站上的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/上。

Answer 1

您的列表标记无效。它始终是ul＆gt; li>一个

<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下拉菜单

2 个答案: