Je veux contrôler la mise en page avec CSS. Comment puis-je réguler les espaces entre les éléments p>
<form name="publish" id="publish" action="publishprocess.php" method="post">
Title:<input type="text" id="title" name="title" size="60" maxlength="110" value="<?php echo $title ?>" <br/>
<div>Contact<input type="text" id="contact" name="contact" size="24" maxlength="30" value="<?php echo $contact ?>" /></div><br/> Task description(You may include task description, requirements on bidders, time requirements,etc):<br/>
<textarea name="detail" id="detail" rows="7" cols="60" style="font-family:Arial, Helvetica, sans-serif"><?php echo $detail ?></textarea>
<br/><br/> price <input type="text" id="price" name="price" size="10" maxlength="20" value="<?php echo $price ?>" /><br/>
<label> Skill or Knowledge Tags</label><br/><input class="tagvalidate" type="text" id="tag" name="tag" size="40" maxlength="60" value="<?php echo $tag ?>" />
<br/><label>Combine multiple words into single-words, space to separate up to 3 tags<br/>(Example:photoshop quantum-physics computer-programming)</label><br/><br/> District Restriction:
<?php echo $locationtext.$cityname; ?><br/><br/>
<input type="submit" id="submit" value="submit" /></form>
7 Réponses :
#detail {margin-bottom:5px;}
CSS: html:
Essayez de minimiser l'utilisation de éléments, comme: autant que vous le pouvez peut-être. HTML est censé porter du contenu et de la structure, n'est ni. Une solution de contournement simple consiste à envelopper vos éléments d'entrée dans
C'est un moyen terrible de faire cela. Comme, abominable!
Vous pouvez également envelopper votre texte dans des champs d'étiquettes, votre formulaire sera donc plus explicable sémantiquement.
N'oubliez pas de faire flotter des étiquettes et des entrées à gauche et d'ajouter une largeur spécifique à celle-ci et de la formulaire contenant. . Ensuite, vous pouvez ajouter des marges à ces deux, pour ajuster l'espacement entre les lignes (vous comprenez bien sûr que ceci est un marge assez minimal qui s'attend à ce que le contenu soit aussi gros que de quelques limites). P>
De cette façon, vous n'aurez pas d'ajouter plus d'éléments, juste les paires d'entrée d'étiquettes, toutes enveloppées dans un élément de formulaire. P>
Par exemple: P>
form{
float:left; /*to clear the floats of inner elements,usefull if you wanna add a border or background image*/
width:300px;
}
label{
float:left;
width:150px;
margin-bottom:10px; /*or whatever you want the spacing to be*/
}
input{
float:left;
width:150px;
margin-bottom:10px; /*or whatever you want the spacing to be*/
}
Je suis d'accord, c'est sémantiquement meilleur que mon approche depuis que le
: S dans mon exemple n'est pas vraiment "paragraphes". C'est un peu infaillible cependant, travaille dans chaque navigateur et vous ne pouvez vraiment pas vous tromper.
#input {
margin:0 0 10px 0;
}
Vous n'avez pas besoin de tout emballer dans une DIV pour obtenir un style de base sur les intrants.
entrée [type = "texte"] {marge: 0 0 10px 0;}
fera l'affaire dans la plupart des cas.
sémantiquement, une balise
est d'accord entre les éléments pour les positionner. Lorsque vous vous trouvez à l'aide de multiples
(qui sont des éléments sémantiques) pour atteindre des effets cosmétiques, c'est un indicateur que vous mélangez des responsabilités et que vous devriez envisager de revenir à la base.
Vous pouvez les formater en tant que table !!
p>
<div id="header_order_form" align="center">
<form id="order_header" method="post">
<label>
<p1>order_no:
<input type="text">
</p1>
<p1>order_type:
<input type="text">
</p1>
</label>
</br>
</br>
<label>
<p1>
creation_date:
<input type="text">
</p1>
<p1>delivery_date:
<input type="text">
</p1>
<p1>billing_date:
<input type="text">
</p1>
</label>
</br>
</br>
<label>
<p1>sold_to_party:
<input type="text">
</p1>
<p1>sop_address:
<input type="text">
</p1>
</label>
</form>
</div>
Vos étiquettes doivent avoir l'attribut pour que l'ID de l'entrée soit correct.