为什么我的 text-align : center 在我的下拉菜单中不起作用?
Why is my text-align : center not working in my dropdown menu?
我正在尝试创建一个下拉菜单,但我的文本对齐命令似乎不起作用(同样适用于字体大小和其他与文本相关的代码)。我尝试将我的文本对齐代码放在 nav ul li 中,但似乎没有任何反应。我也试过将它放在 CSS 的主 .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>
text-align 适用于具有宽度的元素。但是您使用了 width: 0px 。所以很明显你不能在那里使用对齐。
您好首先您必须在下拉菜单 下向ul 添加padding。然后 将 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;
}
我正在尝试创建一个下拉菜单,但我的文本对齐命令似乎不起作用(同样适用于字体大小和其他与文本相关的代码)。我尝试将我的文本对齐代码放在 nav ul li 中,但似乎没有任何反应。我也试过将它放在 CSS 的主 .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>
text-align 适用于具有宽度的元素。但是您使用了 width: 0px 。所以很明显你不能在那里使用对齐。
您好首先您必须在下拉菜单 下向ul 添加padding。然后 将 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;
}