Question

我想强制使用字段，但红色所需的*位于字段名称下方，我只想在字段名称旁边

这是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属性的更多信息，请访问here

如何使用HTML和CSS使该字段看起来是必需的

3 个答案: