如何使用 HTML 和 CSS 使该字段看起来是强制性的答案

【问题标题】：how can i make the field looks mandatory using HTML and CSS如何使用 HTML 和 CSS 使该字段看起来是强制性的
【发布时间】：2013-11-07 00:39:17
【问题描述】：

我想让一个字段成为必填字段，但红色的 *required 出现在字段名称下方，我想在字段名称旁边

这里是 HTML 代码

<div class="span12" id="propertytype">
    {% for field1 in propertytypeform %}   
    <p>
        <label> {{ field1.label_tag }}
            {% if field1.field.required %}
            <span class="required-field">*Required</span>
            {% endif %}
        </label>
        &nbsp;&nbsp;&nbsp; {{ field1 }} <br />
        { field1.errors }}
    </p>
    {% endfor %}                            
</div>

CSS 文件

.required-field{
    color:red;  
    font-size:8px;
    /*position:absolute;
    top:-50;*/
}

【问题讨论】：

必需标签用于 html 中的输入字段，对于上述情况，您需要使用 javascript 检查您的字段是否为空，然后将颜色更改为红色。
我不想改变颜色，它们都是静态字段名和*必填词
最终的 HTML（即没有服务器端脚本）更适合这类问题
{{ field1.label_tag }} 是否只呈现标签文本？如果是这样，将display: inline-block; 添加到“必填字段”类应该可以解决布局问题。
你能帮我解决我问的问题吗..我知道它与 CSS 相关，但仍然无法弄清楚为什么这两个不在同一行

标签： html css django

【解决方案1】：

<div class="field">
  <div class="fieldname">UserName<span class="mandatory">*</span></div></div>

现在你必须为类名编写 css 代码

<style>
   .mandatory{color:red;}</style>

【讨论】：

谢谢，但这就是我正在做的不同之处在于..我在这里使用 django rest 你写的语法和我的完全一样......它仍然无法正常工作..

【解决方案2】：

{{ field1.label_tag }} 的渲染是由 <p> 标记制作的。 <p> 标签是 HTML 中的块标签，因此它占据页面宽度的 100%。因此，{{ field1.label_tag }} 字段旁边没有位置，因此它会在下一行显示其余位置。

这只是一个 CSS 问题。

你可以做的是：

<span class="field">{{ field1.label_tag }}</span>

.field p {
  width: 200px;
}

这是示例，但我建议您使用<div> 调整<p> 的宽度

【讨论】：

【解决方案3】：

您还可以使用 display:flex 来获取标签内同一行中的所有内容。那么你能不能用一下下面的代码，希望对你有帮助。

#propertytype p label {
    display: flex;
}

如果您想了解更多关于 flex 属性的信息，请访问here

【讨论】：