Question

这是我的代码

<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>

我希望所有三个元素都排在最前面。这可行吗？

EDITED：源代码（渲染）是

 <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>

Answer 1

我通常使用

 display: inline-block;

在这种情况下。这应该导致布局尊重

vertical-align: top;

规则。

这类似于@Jason Ellis的table-cell解决方案，但更具语义性，因为这不是表格。

Answer 2

尝试为您的按钮提供vertical-align: text-top属性。在CSS中：

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

或者将VerticalAlign="Top"添加到您的ImageButton控件中（不确定最后一个转换为CSS）。

Answer 3

您是否尝试vertical-align: top;（仅适用于内联元素）这不适用于像div这样的块级元素。因此，解决方案为div元素和display: inline;设置了固定的宽度。它还需要一个高度值。

Answer 4

尝试像这样设计你的CSS：

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

在css中垂直对齐顶部

4 个答案: