CODEWITHSUNDEEP
asp.net-mvchtmlvisual-studio
DarkW1nter
DarkW1nter

Reputation: 2851

html items not appearing on same line

In the html below I'm having trouble getting the label and it's corresponding radio button to appear on the same line, what's the correct way to do this?

thanks

<div class="display-field">
            @foreach (var value in Enum.GetValues(typeof(items.titles)))
            {
                    <div class="display-field">
                            @Html.Label(value.ToString())
                            @Html.RadioButtonFor(m => m.title, value)
                    </div>
            }
</div>

Upvotes: 0

Views: 938

Answers (2)

Luke
Luke

Reputation: 23690

Set the label's CSS style to inline-block.

@Html.Label(value.ToString(), new { style = "display: inline-block" })

Without seeing the CSS for your page, the label element that is produced from your call to @Html.Label() is likely set to block level (display: block). Block level elements stack on top of each other and inline/inline-block level elements don't.

Please keep in mind that you should set the display value in your CSS and not by preference in the htmlAttributes value of your helper. You would do this by putting this (or something better targeted in your CSS file):

label { display: inline-block; }

Upvotes: 1

user4374390
user4374390

Reputation:

Try using LabelFor instead of Label

@Html.LabelFor

For more details, here is a tutorial for labels http://www.tutorialsteacher.com/mvc/htmlhelper-label-labelfor

Upvotes: 2

Related Questions