並排對齊一個輸入和一個DIV

我試圖在一條線上對齊一個真正的按鈕和一個假按鈕。我被要求讓鏈接看起來像一個按鈕，所以我爲它創建了一個圖片精靈。問題是，我不能讓input和div發揮很好。並排對齊一個輸入和一個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中。

來源

2013-05-09 MacSalty

IE6？節哀順變。我不幸的是不得不爲IE6構建網站，但我設法向我的客戶解釋說，他們應該很高興它能夠運行！無論如何，你不可能把它變成一個真正的按鈕，而不是一個看起來像一個的鏈接？ – 2013-05-09 17:30:01

是的，這是殘酷的，但這就是客戶想要的。讓它看起來像一個真正的按鈕的視覺效果很好，這是我的方式不對齊。我崩潰了，並決定犯一個致命的罪。我用了一張桌子。 – MacSalty 2013-05-09 18:32:59

對你有好處。表格是HTML的瑞士軍刀。當我看到人們努力爭取正確的方式，並且使用比標記更多的標記時，我總是笑，只是爲了避免使用表格。 – 2013-05-09 18:56:47

如果使用display：inline，則必須在input和div中都使用它。你的CSS只應用顯示：內聯到div。
這樣做的另一種方式是float：left input field。
您也可以使用twitter bootstrap span類。

來源

2013-05-09 17:55:12 hvu89

我將不得不多玩這個，它仍然給我相同的問題。我想這樣做，而不是我目前的修復。一張桌子。 – MacSalty 2013-05-09 18:35:46

可以發表您的簡單的HTML/CSS代碼小提琴。我可以很快爲你解決它。 – hvu89 2013-05-13 06:38:35

並排對齊一個輸入和一個DIV

回答

相關問題