我正在尝试使用display:inline-block使我的网站的菜单元素彼此相邻。我已经在CSS菜单的不同部分尝试了它,比如'cssmenu li'等,但它不起作用。有人知道如何帮助我吗?
CSS:
#cssmenu {
border: none;
border: 0px;
margin: -17px;
padding: 0px 0px 0;
font-family: "Times New Roman", Verdana, Helvetica, sans-serif;
font-size: 19px;
font-weight: none;
float: left;
width: 600;
margin-left: 300px;
z-index: 999;
position: fixed;
}
#cssmenu ul {
background: #fff;
height: 30px;
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu li {
display: block;
float: left;
padding: 0px;
}
#cssmenu li a {
background: #fff url('seperator.png') bottom right no-repeat;
font-weight: normal;
line-height: 35px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
#cssmenu > ul > li > a {
color: #000;
}
#cssmenu ul ul a {
color: #000;
}
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
background: #fff url('hover.png') bottom center no-repeat;
color: #ddd;
text-decoration: none;
}
#cssmenu li ul {
display: none;
background: #fff;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 225px;
z-index: 200;
/*top:1em;*/
/*left:0px;*/
}
#cssmenu li:hover ul {
display: block;
}
#cssmenu li li {
background: url('sub_sep.png') bottom left no-repeat;
float: auto;
margin: 0px;
display: block;
padding: 0px;
width: 225px;
background: #hhh url('hover_sub.png') center left no-repeat;
border: 0px;
color: #000;
}
#cssmenu li:hover li a {
background: none;
color: #000;
font: "Times New Roman", Verdana, Helvetica, sans-serif;
font-size: 15px;
text-align: center;
}
#cssmenu li ul a {
display: block;
height: 35px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
background: #fff url('hover_sub.png') center left no-repeat;
border: 0px;
color: #000;
text-decoration: none;
}
#cssmenu p {
clear: left;
}
答案 0 :(得分:1)
你可以使用#cssmenu li {display:inline block;}和#cssmenu li a {padding:0 16px;}但你的html是错误的。再次检查你的ul和li。你需要:
<div id="cssmenu">
<ul>
<li class="has-sub">
<a></a>
...
</li>
<li class="has-sub">
<a></a>
...
</li>
<li class="has-sub">
<a></a>
...
</li>
</ul>
</div>