comment puis-je faire sur le terrain semble obligatoire à l'aide de HTML et CSS
Je veux rendre un champ obligatoire, mais l' *requis dans la couleur rouge est à venir sous le nom de champ qui, je tiens juste à côté de nom du champ
voici le code 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>
Fichier CSS
.required-field{
color:red;
font-size:8px;
/*position:absolute;
top:-50;*/
}
- balise obligatoire est utilisé en entrée déposé en html pour obligatoire pour le scénario ci-dessus u besoin d'utiliser javascript pour vérifier si ur champ est vide, puis changez la couleur rouge.
- je ne veux pas changer de couleur, ils sont tous deux de champ statique nom et le mot requis
- HTML Final (c'est à dire sans script côté serveur) est mieux pour ce genre de questions
- Ne
{{ field1.label_tag }}
rend juste le texte de l'étiquette? si donc, l'ajout dedisplay: inline-block;
à la "nécessaire-champ" classe devrait résoudre le problème de mise en page. - pouvez vous s'il vous plaît m'aider avec le problème que j'ai demandé..je sais que sa realted à CSS, mais pas encore en mesure de comprendre pourquoi ces deux ne sont pas dans la même ligne
- jamie Lire, j'ai essayé aussi mais ça ne marche pas
Vous devez vous connecter pour publier un commentaire.
Le rendu de :
{{ field1.label_tag }}
est faite par un<p>
tag. Un<p>
tag est un bloc de balise dans le code HTML afin qu'il prennent 100% de la largeur de la page. Donc, il n'y a pas de place à côté du champ{{ field1.label_tag }}
et il affiche le reste sur la ligne suivante.C'est seulement une question CSS.
Ce que vous pouvez faire est :
C'est pour l'exemple, mais je vous recommandons d'utiliser
<div>
pour ajuster la largeur de<p>
Vous pouvez également utiliser display:flex pour obtenir tout le contenu dans une même ligne à l'intérieur d'une balise. Pouvez-vous donc une fois utiliser un code suivant j'espère que ça va vous aider.
Et si vous voulez en savoir plus sur flex propriété, alors visitez ici