为什么我的 text-align: center 在我的下拉菜单中不起作用？

Question

我正在尝试创建一个下拉菜单，但我的 text-align 命令似乎不起作用（同样适用于字体大小和其他与文本相关的代码）。 我尝试将我的文本对齐代码放在 nav ul li 中，但似乎没有任何反应。 我也试过把它放在 CSS 的 main.drop-down 菜单上，但它仍然没有变化。 有谁可以帮我离开这里吗？ 我无法弄清楚这背后的原因。

我的 HTML 和 CSS 代码是：

 nav{ flex:1; text-align: right; } nav ul li{ list-style: none; display: inline-block; margin-left: 60px; position: relative; } nav ul li a{ text-decoration: none; color: #fff; font-size: 13px; transition: all 0.5s; } nav ul li a:hover{ color: #E6C7F3; }.dropdown-menu{ display: none; } nav ul li:hover.dropdown-menu { display: block; position: absolute; left: -35; top: 100%; width: 100px; background-color:black; opacity: .8; border-radius: 10px; }.dropdown-menu ul{ display: block; padding-top: 10px; }.dropdown-menu ul li{ width: 0px; left: -58; bottom: 5; padding: 10px; padding-right: 40px; text-align: center; }

 <div class="navbar"> <a href="index.html"><img src="image/durra.png" class="logo"></a> <nav> <ul> <li><a href="index.html">HOME</a></li> <li><a href="about.html">ABOUT US</a></li> <li><a href="shop.html">SHOP</a> <div class="dropdown-menu"> <ul> <li><a href="#">Bestsellers</a></li> <li><a href="#">Accessories</a></li> <li><a href="#">Jewelry</a></li> <li><a href="#">Miscellaneous</a></li> </ul> </div> </li> <li><a href="feedback.html">FEEDBACK</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </nav> </div>

Answer 1

text-align 适用于具有宽度的元素。 但是您使用了宽度：0px。 所以很明显你不能在那里使用 alignment 。

Answer 2

嗨首先你必须在下拉菜单下添加填充到 ul 。 然后将 li 项的宽度设置为 100% 。 请参考下面的代码。

.dropdown-menu ul {
   display: block;
   padding-top: 10px;
   padding: 10px 0 0;
}

.dropdown-menu ul li {
    width: 100%;
    left: -58;
    bottom: 5;
    padding: 10px 0;
    /* padding-right: 40px; */
    text-align: center;
}