Question

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>

Answer 1

Use the “inline-table” style instead:

Possible ways of arranging DevExpress controls within a page

Data Editors – Model Validation