css - 将标签与同一行上的跨度对齐 - 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

将 span 包裹到<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>

另一方面，您可以使用 HTML5required属性，我不知道如何翻译成 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 标签 {
        向左飘浮;
        宽度：自动；
    }
    #letsgetStarted span.required {
        向左飘浮;
    }

将您的 html 文本放在标签标签内。我没有尝试过。它应该适合你。