How do I avoid 'bottom-aligned' labels with inline associated inputs?


Tags: css,asp.net-mvc-3,devexpress

Problem :

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? enter image description here

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>


Solution :

Use the "inline-table" style instead:

Possible ways of arranging DevExpress controls within a page

Data Editors - Model Validation


    CSS Howto..

    How to background css with php variable

    How to do line animation using CSS and SVG

    css animation how to get the ball to bounce

    Show Feed in two columns in HTML

    How to keep DIV stretched to the bottom of the webpage with height 100% and overflow:auto using CSS only?

    Asp.Net-MVC: How to style <%=Html.ActionLink()%> with Css?

    hide/show html div with javascript

    How to add ::after in the HTML link tag

    How to do a webkit css endless rotation-animation.

    How can I hide the backface of a block element rotated with transform: rotateX()?

    jquery width toggle animation is showing vertical cells during animation takes place

    How do I display other info on page using only CSS and HTML

    How to make images inside a box responsive CSS

    How can I print a full gridview area via a custom print window?

    How to change text-selection styles with javascript [duplicate]

    How to set class on div that is inside of repeater in code behind?

    Can't figure out how to code my css

    Getting unordered list in front of image slide-show in IE8, IE7 and probably IE6

    How to preload style image to use it when server is down?

    How do I add a the bootstrap 'form-control' class to a select using the Simple_Form gem?

    How to include LESS files in web page using Web Essentials?

    how to remove element.style in css

    How do I get this div to be positioned below this search form?

    How to create a header.php and footer.php with CSS files?

    How to move/position DIV container by changing CSS values using Javascript?

    How to make H1 tag responsive in Avada WordPress theme using CSS

    How to set background image to keep its position while browser width is changing?

    How to put an image in div with CSS?

    How to make horizontal lines with words in the middle using CSS?

    How to make a text or html tag look like a button