我有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>
问题是我不能把它们放在同一行。 它们如下所示:
我的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按钮在同一行,但中间的表格高于它们。
答案 0 :(得分:1)
css中的用户“vertical-align”属性。将值设置为“中间”。
干杯
答案 1 :(得分:-1)
垂直对齐是正确的答案,虽然我反对使用'开发者工具'...... 诀窍是要了解你在做什么......
这会对你有所帮助:http://phrogz.net/css/vertical-align/index.html
请注意,将按钮放在“display:inline-block”中可以帮助您轻松解决此问题!