在同一行上将标签与跨度对齐 - CSS

Question

好吧,我真的很尴尬,我无法解决这个问题,但是......我的表格标签后跟一个"必填"的星号.星号简单地下降到标签文本下的下一行,而不是在文本旁边对齐.

我希望所需的星号最终与标签文本在同一行.我不应该为此使用花车吗？他们在同一个div中,所以我不确定为什么他们不会彼此相邻.

谢谢!

    <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>

我在这里有一个问题的工作示例:

Answer 1

包裹跨度 <label></label>

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

您可以margin根据需要将其移动到左侧:

例

更新小提琴

更新

正如您所使用的@LabelFor()那样,请将其添加到您的标签中:

display:inline;