Question

This你可以找到一个小提琴示例，这里是代码：

<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>孩子进行垂直居中，而不是使用相对位置。

Answer 2

请检查：http://jsfiddle.net/thilakar/y4yJX/7/

我已经编辑了一些代码。

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

2 个答案: