Question

我正在尝试在一行上对齐一个真实按钮和一个假按钮。我被要求让我的链接看起来像一个按钮，所以我为它创建了一个图像精灵。问题是，我无法让input和div发挥得很好。

    <div class="submitForm">
        <input type="submit" value="Rename" />
        <div class="smallButton">@Html.ActionLink("Cancel", "SiteIndex", new { id = @Html.DisplayFor(model => model.SiteID) })</div>
        @Html.HiddenFor(model => model.SiteID)
    </div>

上面是HTML（ASP.net MVC 4），下面是CSS：

.smallButton
{
    display: inline;
}

.smallButton a
{
    color: #000 !important;
    font-family: Arial;
    font-size: 13px;
    padding: 3px 15px;
    background: url('../../Images/smallBtn.jpg') 0 0;
}

.smallButton a:Hover
{
    color: #000 !important;
    background: url('../../Images/smallBtn.jpg') 0 -26px;
}

.smallButton a:Active
{
    color: #000 !important;
    background: url('../../Images/smallBtn.jpg') 0 -52px;
}

我忘了澄清，我需要在IE 6和IE 7中正确对齐。它看起来应该在Chrome中。

Answer 1

如果使用display：inline，则必须在input和div中使用它。你的css只应用display：inline to div。
另一种方法是浮动：左输入字段。
您也可以使用twitter bootstrap span class。

并排对齐INPUT和DIV

1 个答案: