How do I avoid 'bottom-aligned' labels with inline associated inputs?
I use a 'ul' tag for form fields and in each of its
li tags I place a label and input, using the standard Html.Label and Html.Editor helpers, except for dropdowns, where I use the DevExpress
ComboBox extension. This renders a table instead of a select tag, which is fine, but when I set the CSS display attribute on this table to 'inline-block' to place it next to it's label, the label gets pushed down, where it would normally middle align with the input, it now 'bottom-aligns' with the input. How can I align the 'Course Type' label the same as the 'Name' label in the image?
The rendered HTML is very like the following, just shortened for brevity:
<li> <label for="" style="width: 80px;">*Course Type</label> <table class="dxeButtonEdit_Office2010Black"> </tbody> </table> </li>
Use the "inline-table" style instead: