[ACCEPTED]-Label and text box on the same line using css-asp.net-mvc

Accepted answer
Score: 18

I typically float my label left and the 3 input lines up next to it. Here's an example: http://jsfiddle.net/qXFLa/

Here's 2 an example of how I'd rearrange your code:

<div class="editor">
  @Html.LabelFor(m => m.UserName)
  @Html.TextBoxFor(m => m.UserName)
  @Html.ValidationMessageFor(m => m.UserName)

Then, for 1 your css:

.editor label {
  float: left;
  width: 30px;   // just putting an example here - but give them a width to align better
  text-align: right; // this right-aligns them with the input

.editor input[type=text] {
  width: 80px; // just putting an example value in here to make your inputs uniform in length
  margin: 0 0 0 10px; // just some breathing room from the labels
Score: 15

I'm using this css

{   display: block;
    float: left; 
    padding: 0; 
    width: 150px;
    margin: 1em 1em 0 0;

    margin: 0.5em 0 0 0;
    overflow: auto;
    min-height: 2em;


Score: 1

Although i have not tried the accepted answer 6 by kinakuta, it requires you to re-arrange 5 the Visual Studio generated view; I would 4 approach as follows, if you don't want to re-arrange the autogenerated layout., i.e. to keep the 3 format

<div class="editor-label" />
<div class="editor-field" />

<div class="editor-label" />
<div class="editor-field" />


The following CSS appears to work 2 for me. Feel free to offer improvements. (it 1 looks very similar to the answer by Pa0l0)

<style type="text/css">
    .editor-label, .display-label
        margin:1em 0 0 0;
    .editor-field, .display-field
        margin:1em 0 0 0;   
Score: 1

A few of these answers wasn't quite what 2 I was looking for. This bit in my CSS seems 1 to work for my needs.

    display:inline-block !important;

More Related questions