垂直对齐顶部的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

回答

相关问题