Adding elements without br in razor

Question

I want to know how can I add elements to page without breaking line

Now I have a piece of code:

@foreach (var item in Model.TagModels)
    { 

        <div class="editor-field">
            @Html.EditorFor(model => item.Name)
            @Html.ValidationMessageFor(model => item.Name)
        </div>

    }

which adds me inputs to page, but with breaking line.

I want to have it in one row. Could be done?

Answer 1

Try this:

@foreach (var item in Model.TagModels)
{ 

    <div class="editor-field" style="float: left">
        @Html.EditorFor(model => item.Name)
        @Html.ValidationMessageFor(model => item.Name)
    </div>

}

The float property in CSS is used for alignment. This would place all the divs in one line. Each DIV is added to the right of the previous DIV

Answer 2

It's the div container that your inputs are in that are causing them to appear below each other. Just remove the div or replace it with a span or display:inline

Answer 3

The validationmessage is probably a div. Try changing the CSS to display:inline