Here is my code
<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>
I would like all three elements to simply line up at the top. Is this doable?
EDITED: Source code (rendered) is
<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>
I usually use
display: inline-block;
in this situation. That should cause the layout to respect
vertical-align: top;
rules.
This is similar to @Jason Ellis's table-cell
solution, but more semantic since this is not a table.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With