编辑:
我自己找到了解决方案。我元素中的宽度和高度应该放在li元素中。所以这些:
width: 7vw;
height: 7vw;
进李:)
我已经有一段时间了,但我只是想不通。Internet Explorer和Firefox似乎可以正确显示我的菜单,但Chrome无法显示。
这是html:
<div id="navigationmenu">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
这是CSS。
我那里有很多东西,但我都张贴了。也许有什么干扰?
#navigationmenu a {
display: block;
text-transform: uppercase;
text-decoration: none;
color: #a2a2a2;
font-size: 1.1vw;
line-height: 7vw;
text-align: center;
width: 7vw;
height: 7vw;
border: 1px #a2a2a2 solid;
background: #ffffff;
-moz-border-radius: 50%;
border-radius: 50%;
cursor: default;
margin-top: 0;
margin-bottom: 0;
margin-left: 2.1%;
margin-right: 2.1%;
transition-duration: 400ms;
transition-property: box-shadow;
transition-timing-function: ease;
-webkit-transition-duration: 400ms;
-webkit-transition-property: box-shadow;
-webkit-transition-timing-function: ease;
-o-transition-duration:400ms;
-o-transition-property: box-shadow;
-o-transition-timing-function: ease;
}
#navigationmenu a:hover{
background:#ffffff;
border: 1px #a2a2a2 solid;
-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
}
#navigationmenu li {
display: inline;
float: left;
margin: 0;
padding: 0;
}
我已经尝试过将a元素的边距并填充为0,然后对li元素应用左右边距,但这使li元素在Firefox中彼此之间相距太远(在Chrome中,它们略胜一筹,但是不好)。
使用以下CSSli
在您的元素之间添加边距ul
现场示例:
http://jsbin.com/piyilafupe/1/
#navigationmenu ul li {
margin-right: 50px; /* ADD YOU DESIRED DISTANCE HERE */
}
注意:如果出于任何原因需要删除最右边元素的边距,则可以添加此边距
#navigationmenu ul li:last-child {
margin-right: none;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句