垂直對齊頂部的CSS

這裏是我的代碼垂直對齊頂部的CSS

<div style="margin:0;padding:0;vertical-align:text-top; border:1px solid red;float:right;"> 
    <span>Key:</span> 
    <asp:TextBox ID="tbKey" MaxLength="16" runat="server" ></asp:TextBox> 
    <asp:ImageButton ID="btnRefresh" runat="server" imageUrl="_img/btn_submit.gif" Height="22" Width="52" /> 
</div>

我想所有的三個要素簡單地在頂部排隊。這是可行的嗎？

編輯：的源代碼（渲染）是

<div style="margin:0;padding:0;vertical-align:text-top; border:1px solid red;float:right;"> 
       <span>Key:</span> 
       <input name="tbKey" type="text" maxlength="16" id="tbKey" /> 

       <input type="image" name="btnRefresh" id="btnRefresh" src="_img/btn_submit.gif" style="height:22px;width:52px;border-width:0px;border-width:1px;" /> 

      </div>

來源

2011-02-22 sarsnake

這就是你的.net代碼。向我們展示呈現的HTML/CSS。 – 2011-02-22 21:09:12

剛編輯的問題，見上面的 – sarsnake 2011-02-22 21:45:51

嘗試給vertical-align: text-top屬性的按鈕。在CSS：

#btnRefresh 
{ 
    vertical-align: text-top; 
}

或者添加VerticalAlign="Top"到您的ImageButton控件（不知道這最後一個是如何轉化爲CSS）。

來源

2011-02-22 21:06:50 zdyn

不起作用。添加vertical-align：text-top;按鈕只是推動其他2個元素。當被移除時，按鈕就會啓動，所以反之亦然。我相信，CSS忍者將解釋爲什麼:) – sarsnake 2011-02-22 21:43:21

@gnomixa，對不起，我一定誤解了你。我的錯。 – zdyn 2011-02-22 21:48:28

你試過vertical-align: top;（僅適用於內聯元素）這不適用於像div這樣的塊級元素。因此，該解決方案爲div元素設置了固定寬度並且需要一個高度值。display: inline;

來源

2011-09-07 21:44:03 lnguyen55

嘗試造型你的CSS是這樣的：

div{ 
    display: table-cell; 
    vertical-align: top; 
}

來源

2012-07-10 16:50:01

我通常在這種情況下使用

display: inline-block;

。這應該導致佈局尊重

vertical-align: top;

規則。

這與@Jason Ellis的table-cell解決方案類似，但更多的語義，因爲這不是一個表。

來源

2012-07-10 16:53:33 harpo

垂直對齊頂部的CSS

回答

相關問題