css - 在同一行上将标签与 Span 对齐 - 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>

我有一个问题的工作示例 here :

Answer 1

将 span 包装到 <label></label> 中

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

你可以设置margin根据需要将其向左移动:

Example

Updated Fiddle

更新

当你使用 @LabelFor()所以把这个给你的标签:

display:inline;