这是 fiddle ,这是一个垂直菜单,向右浮动。我必须使用百分比值(以进行响应式设计),但最后一个菜单会带有下划线。如果我用“px”设置它,它就可以工作。
#topmenu
{
margin-top: 20px;
min-height: 47px;
background-color: red;
border-radius: 25px;
float: right;
}
#topmenu ul
{
list-style-type: none;
margin: 0 0 0 0;
padding: 13px 0 0 0;
color: #fff;
font-size: 1.6em;
}
#topmenu ul li
{
display: inline;
padding: 15px 2.5% 17px 2.5%; /* when its set with percents, it screwes */
margin: 0 0 0 0;
}
#topmenu ul li:last-child
{
border: none;
box-shadow: none;
}
#topmenu ul li:first-child
{
border-top-left-radius: 15px;
}
#topmenu ul li img
{
vertical-align: middle;
}
#topmenu a
{
color: #fff;
text-decoration: none;
height: 54px;
}
<div id="topmenu"><ul>
<li class="">
<a href="tanar">
Nyitólap</a>
</li>
<li class="">
<a href="diak">
Rólunk</a>
</li>
<li class="">
<a href="szulo">
Szállodák</a>
</li>
<li class="">
<a href="nyelviskola">
Apartmanok</a>
</li>
<li class="">
<a href="boltok">
Gourmentteszt</a>
</li>
</ul>
<div style="clear:both;"></div></div>
最佳答案
你在#topmenu 上有一个float:right,但你需要一个float:left 给他的 child “ul”。此外,如果您想要“li”填充和边距,您还需要将它们向左浮动。
关于html - 按百分比设置填充时垂直菜单转到新行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20467522/