Question

好吧，我真的很尴尬，我无法弄清楚这一点，但...... 我有表格标签，后面跟着“必填”的星号。星号只是下降到标签文本下的下一行，而不是在文本旁边对齐。

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

谢谢！

enter image description here

    <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

将范围换算到<label></label>

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

您可以根据需要设置margin将其移至左侧：

Example

Updated Fiddle

<强>更新

当您使用@LabelFor()时，请将此标记添加到您的标签中：

display:inline;

Answer 2

如果你不能搞乱HTML，但你可以使用CSS＆gt;

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

将html文本放在标签标签中。我没试过。它应该适合你。

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

4 个答案: