gpt4 book ai didi

html - 在水平导航栏中居中左浮动元素?

转载 作者:太空宇宙 更新时间:2023-11-04 13:41:24 25 4
gpt4 key购买 nike

所以我有这个导航栏,你可以在这里看到--

http://codepen.io/anon/pen/FJGvg/

我试图在导航栏中均匀分布元素,但我无法让它在我的生活中发挥作用。我尝试了很多东西。这是代码:

<ul id="menu">
<li><a>Test</a></li>
<li><a>Test Different Length </a></li>
<li><a>Test Again</a></li>
<li><a>Test23</a></li>
</ul>

#menu {
width: 50%;
min-width: 700px;
margin: auto;
margin-top: 10px;
padding: 10px 0 0 0;
list-style: none;
text-align: center;
background-color: #111;
background-image: linear-gradient(#444, #111);
border-radius: 18px;
/* box-shadow: 0 2px 1px #9c9c9c;*/
}

#menu li {
display: inline;
margin-left: auto;
width: 25%;
float: left;
padding: 0 0 10px 0;
position: relative;
}

#menu a {
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}

#menu li:hover > a {
color: #fafafa;
}

/* Clear floated elements */
#menu:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

最佳答案

#menu {
width: 50%;
min-width: 700px;
margin: 10px auto 0 auto;
padding: 5px 0;
list-style: none;
text-align: center;
background-color: #111;
background-image: linear-gradient(#444, #111);
border-radius: 18px;
/* box-shadow: 0 2px 1px #9c9c9c;*/
}

#menu li {
display: inline-block;
width: 23%;
position: relative;
padding:0;
}

#menu a {
height: 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}

#menu li:hover > a {
color: #fafafa;
}

/* Clear floated elements */
#menu:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

关于html - 在水平导航栏中居中左浮动元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22701395/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com