為什么我的 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;
}