html - 如何在 IE7 上对齐这些标签/输入框/按钮

Question

This您可以找到一个 Fiddle 示例，这是代码:

<div class="menu-alto">
    <ul>
        <li>
            <a title="Link" href="#">Link</a>
        </li>

        <li class="newsletter">
            <a title="Newsletter" href="#">Newsletter</a>
        </li>
        <li class="last">
            <label style="color:#99cc00">cerca&nbsp;</label>
            <input type="text" style="width:116px;" />
            <input type="submit" style="width:40px;" class="bottone" value="VAI" />
        </li>
    </ul>
</div>

.menu-alto ul
{
    list-style:none;
    padding:0;
    margin:0;
    border:0;
}

.menu-alto li
{
    display:block;
    float:left;
    font-family:Arial;
    text-transform:uppercase;
    color:#7c7c7c;
    font-size:10px;
    padding-right:16px;
}

.menu-alto li a:link,
.menu-alto li a:visited
{
    color:#7c7c7c;
    text-decoration:none;
    letter-spacing:1px;
}

.menu-alto li a:hover
{
    text-decoration:underline;
}

.menu-alto .last
{
    padding-left:5px;
    position:relative;
    top:-5px;
}

.menu-alto .bottone
{
    position:relative;
    top:2px;
    height:21px;
    font-size:11px;
}

如您所见(仅在 IE7 上)带有文本 CERCA 的标签与其他链接不对齐(居中)，而在 Chrome 上(例如)按钮位于底部垂直中间对齐。我该如何解决这个问题？

Answer 1

您应该使用 vertical-align:middle; 垂直居中在你所有的<li> child 而不是使用相对位置。