嗨,我写了css代码来显示菜单栏。面对如此多的问题,谷歌了他们,并找到了解决方案。但这个我找不到。
这是chrome输出,在菜单框之间有间隙,但是如果firefox没有任何问题的话。它的联系人。我该如何解决这个问题?
CSS
#candymenu li {
list-style-type: none;
display: inline-block;
width: 8.1em;
float: center;
text-align: center;
font-family: "Lucida Grande", sans-serif;
height: 3em;
}
#candymenu ul {
width: 100%;
margin:0 153px;
}
#candymenu li a {
display: inline-block;
margin 150px;
padding: .5em .5em .5em .5em;
text-decoration: none;
}
#candymenu li {
list-style-type: none;
display: inline-block;
width: 8.1em;
float: center;
text-align: center;
font-family: "Lucida Grande", sans-serif;
height: 3em;
border-right: 1px #818181 solid;
-webkit-box-shadow: 1px 1px #bbb;
box-shadow: 1px 1px 1px #bbb;
}
#candymenu li a {
display: inline-block;
padding: .8em .5em .5em .5em;
text-decoration: none;
color: #292929;
text-shadow: 1px 1px 1px #cccccc;
}
#candymenu li {
background-color: #c9c9c9;
background-image: -webkit-gradient(linear, left top, left bottom, from(#c9c9c9), to(#848484), color-stop(0.6, #a1a1a1));
}
#candymenu li:hover {
background-color: #dc3d73;
background-image: -webkit-gradient(linear, left top, left bottom, from(#dc3d73), to(#4c4c4c), color-stop(0.6, #474747));
}
#candymenu li:hover a {
color: #e8e8e8;
text-shadow: 1px 1px 0px #353535;
}HTML
<div id="candymenu">
<ul>
<li id="home">
<a href="">Home</a></li>
<li id="Gaming">
<a href="">Gaming</a></li>
<li id="Reviews">
<a href="">Reviews</a></li>
<li id="News">
<a href="">news</a></li>
<li id="Interviews">
<a href="">interviews</a></li>
<li id="download">
<a href="">Download</a> </li>
<li id="support">
<a href="">Support</a></li>
<li id="candy">
<a href="">Candy</a></li>
<li id="events">
<a href="">Events</a></li>
</ul>
</div>现在我该如何缩小这个差距呢?
发布于 2011-08-17 20:37:43
我认为内联块会导致依赖于空格的布局,这很糟糕。
因此,您基本上需要将所有li标记背靠背地放在一行上。如下所示:
<div id="candymenu">
<ul>
<li id="home"><a href="">Home</a></li><li id="Gaming"><a href="">Gaming</a></li>等。
如果成功了,请让我知道!
https://stackoverflow.com/questions/7092649
复制相似问题