What css is required to get editor-label and editor-field displayed with a side by side layout?

Question

So the default MVC application has the following css (in Site.css) -

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label,
.editor-label
{
    margin: 1em 0 0 0;
}

.display-field,
.editor-field
{
    margin:0.5em 0 0 0;
}

.text-box
{
    width: 30em;
}

.text-box.multi-line
{
    height: 6.5em;
}

.tri-state
{
    width: 6em;
}

What changes are required? Thanks

Answer 1

This is a css question. What you are seeking is the property called display: inline-block.

What this does it set the element as a block but does not put a page break after and before the element as block would do.

.display-field,
.editor-field
{
    display: inline-block;
    margin:0.5em 0 0 0;
}