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

Question

我想让一个字段成为必填字段，但红色的 *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;*/
}

Answer 1

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

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

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

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

Answer 3

您还可以使用 display:flex 来获取标签内同一行中的所有内容。因此，您可以使用以下代码吗，希望对您有所帮助。

#propertytype p label {
    display: flex;
}

如果您想了解有关 flex 属性的更多信息，请访问此处