0

我试图在一行上对齐一个真正的按钮和一个假按钮。我被要求让我的链接看起来像一个按钮，所以我为它创建了一个图像精灵。问题是，我无法让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 中。

4

1 回答 1

1
  • 如果你使用 display:inline，你必须在 input 和 div 中都使用它。您的 css 仅将 display:inline 应用于 div。
  • 另一种方法是 float:left 输入字段。
  • 您还可以使用 twitter 引导跨度类。
于 2013-05-09T17:55:12.287 回答