输入标签和表格高度

时间:2012-09-09 01:06:11

标签: asp.net button html-table

我有asp.net按钮,表格和按钮如下:

<table style="width: 600px;">
    <tr>
        <td>
            <div style="float: right;">
                <asp:Button ID="_btn01" runat="server" Text="GO" />
                <table class="IHCommandButtonContainer" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="IHCommandButtonL"><asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="/Test/Images/btn_Search.gif" /></td>
                        <td class="IHCommandButtonM"><span>Search</span></td>
                        <td class="IHCommandButtonR"><img src="/Test/Images/btn_R.gif" /></td>
                    </tr>
                </table>
                <asp:Button ID="Button1" runat="server" Text="GO" />
            </div>
        </td>
    </tr>
</table>

问题是我不能把它们放在同一行。 它们如下所示:

enter image description here

我的css如下:

<style type="text/css">
    .IHCommandButtonContainer   { height: 21px; border: 0px; display: inline-block; cursor: pointer; margin: 0px; padding: 0px; border-spacing: 0px; border-collapse: collapse; }
    .IHCommandButtonL           { width: 22px; height: 21px; }
    .IHCommandButtonL   input   { width: 22px; height: 21px; }
    .IHCommandButtonM           { background-image: url(/Test/Images/btn_M.gif); height: 21px; font-size: 9pt; font-family: Sans-serif, Arial, Dotum; }
    .IHCommandButtonM   span    { margin: 0px 2px 0px 0px; }
    .IHCommandButtonM_          { background-image: url(/Test/Images/btn_M_.gif); height: 21px; font-size: 9pt; font-family: Sans-serif, Arial, Dotum; }
    .IHCommandButtonM_  span    { margin: 0px 2px 0px 0px; }
    .IHCommandButtonR           { width: 3px; height: 21px; }
    .IHCommandButtonR   img     { width: 3px; height: 21px; cursor: pointer; }
</style>

如何将它们放在同一行? 就像2个GO按钮在同一行,但中间的表格高于它们。

2 个答案:

答案 0 :(得分:1)

css中的用户“vertical-align”属性。将值设置为“中间”。

干杯

答案 1 :(得分:-1)

垂直对齐是正确的答案,虽然我反对使用'开发者工具'...... 诀窍是要了解你在做什么......

这会对你有所帮助:http://phrogz.net/css/vertical-align/index.html

请注意,将按钮放在“display:inline-block”中可以帮助您轻松解决此问题!