html - 按百分比设置填充时垂直菜单转到新行

Question

这是 fiddle ，这是一个垂直菜单，向右浮动。我必须使用百分比值(以进行响应式设计)，但最后一个菜单会带有下划线。如果我用“px”设置它，它就可以工作。

http://jsfiddle.net/aDRnn/

#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>

Answer 1

你在#topmenu 上有一个float:right，但你需要一个float:left 给他的 child “ul”。此外，如果您想要“li”填充和边距，您还需要将它们向左浮动。