我想强制使用字段,但红色所需的*位于字段名称下方,我只想在字段名称旁边
这是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>
{{ field1 }} <br />
{ field1.errors }}
</p>
{% endfor %}
</div>
CSS文件
.required-field{
color:red;
font-size:8px;
/*position:absolute;
top:-50;*/
}
答案 0 :(得分:0)
<div class="field">
<div class="fieldname">UserName<span class="mandatory">*</span></div></div>
现在你要编写强制类名的css代码
<style>
.mandatory{color:red;}</style>
答案 1 :(得分:0)
渲染:{{ field1.label_tag }}
由<p>
标记生成。 <p>
标记是HTML中的块标记,因此它占用页面宽度的100%。因此,字段{{ field1.label_tag }}
旁边没有位置,因此它会在下一行显示其余部分。
这只是一个CSS问题。
你能做的是:
<span class="field">{{ field1.label_tag }}</span>
.field p {
width: 200px;
}
这是示例,但我建议您使用<div>
来调整<p>
的宽度
答案 2 :(得分:0)
您还可以使用display:flex在标记内的同一行中获取所有内容。因此,您能否一次使用以下代码,希望对您有所帮助。
#propertytype p label {
display: flex;
}
如果您想了解有关flex属性的更多信息,请访问here