0

本物のボタンと偽のボタンを 1 行に並べようとしています。リンクをボタンのように見せるように依頼されたので、そのための画像スプライトを作成しました。問題は、 と をうまく再生できないこと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 に答える