Preventing line breaks 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 above code, the label and text box are on separate lines. I want to combine them in one line so that I have something like ...

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

It should turn out like FirstName: _______

Thanks in advance.

Answer 1

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

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

Answer 2

Here is what I did to make this work for me (code snippet 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:
new {style = "display: inline;" }
in LabelFor (..).
It works like a charm.