Align label with spacing on one line - CSS

Question

Well, I am very ashamed that I cannot understand this, but ... I have form labels followed by the "required" asterisk. The asterisk simply moves on to the next line below the label text instead of the alignment next to the text.

I want the required asterisk to appear on the same line as the label text. I did not need to use floats for this right? They are in the same div, so I'm not sure why they just don't lie next to each other.

Thanks!

    <div id="letsGetStarted">
    @using (Html.BeginForm())
    {

        @Html.ValidationSummary(true)

        <div>@Html.LabelFor(model => model.NewClub.NewClubName) <span class="required">&#42;</span></div>
        @Html.EditorFor(model =>model.NewClub.NewClubName)
        @Html.ValidationMessageFor(model => model.NewClub.NewClubName)


        <div>
            @Html.LabelFor(model => model.ClubTypes) <span class="required">&#42;</span>
        </div>

        @Html.DropDownListFor(model => model.ClubTypes, Model.ClubTypes)
        @Html.ValidationMessageFor(model => model.ClubTypes)

        <p>
            <input type="submit" name="submit" value="Submit" class="btn"/> <input type="reset" name="reset" value="Cancel" class="btn ltgrey" /> 
        </p>
    }
</div>

I have a working example of the problem here :

Answer 1

Go to <label></label>

<div>
    <label for="NewClub_NewClubName">Name your club <span class="required">*</span></label> 
</div>

margin, :

@LabelFor(), :

display:inline;

Answer 2

HTML, CSS >

label{display:inline; clear:both;}

, ...

Answer 3

HTML5 CSS3 . , ASP.net:

.required:after {
    content: "*";
}

HTML

<div>
    <label for="NewClub_NewClubName" class="required">Name your club.</label>
    <input ...>
</div>

, HTML5 required, , ASP. placeholder .

<div>
    <input type="text" name="newClub" placeholder="New club name" required/>
</div>

:required. , CSS3, :

<div>
    <input type="text" id="newClub" name="newClub"
        placeholder="New club name" required/>
    <label for="newClub">New club name.</label>
</div>

input:required + label:before {
    content: "*";
    color:   red;
}

, ASP.

Answer 4

    #letsgetStarted {
        overflow:hidden;
    }
    #letsgetStarted label {
        float: left;
        width: auto;
    }
    #letsgetStarted span.required {
        float: left;
    }

Put the html text inside the tag tags. I have not even tried. It should work for you.