Prevent Line Break After @Html.LabelFor In ASP.NET MVC 4 Using Razor

Question

Here is my code.

@using (Html.BeginForm()) {
@Html.ValidationSummary()

<fieldset>
    <legend>Registration Form</legend>
    <ol>
        <li>
            @Html.LabelFor(m => m.FirstName)
            @Html.TextBoxFor(m => m.FirstName)
        </li>
    </ol>
 </fieldset>
}

From the code above, the label and the textbox are on separate lines. I want to combine them to be on the same line so I can have something like...

@Html.LablFor(m => m.FirstName): @Html.TextBoxFor(m => m.FirstName)

Should end up looking like FirstName: _______

Thanks in advance.

Solution 1

There must be something wrong with your CSS because <label> and <input> are both inline elements. The only reason they would be appearing on separate lines would be if your CSS are treating them as block elements or if they cannot fit on the same line of content.

Demo in jsFiddle: http://jsfiddle.net/tSFtJ/

Solution 2

Here is what I did to make this work for me (snippet of code below).
View Model

<!-- language: c# -->
[DataType(DataType.EmailAddress)]
[Display(Name = "LabelEmail", ResourceType = typeof(Resources.GeneralResource))]
public string EmailAddress { get; set; }

View.cshtml

<!-- language-all: lang-html -->
<div>
    @Html.LabelFor(m => m.EmailAddress, new { style="display:inline;"})
    @Html.DisplayFor(m => m.EmailAddress)
</div> 

The important bit is the:
new { style="display:inline;"}
in the LabelFor(..).
Works like a charm.