web-dev-qa-db-fra.com

Comment puis-je ajouter des espaces entre deux lignes <input> en utilisant CSS?

Je veux contrôler la mise en page avec CSS. Comment puis-je réguler les espaces entre les éléments <input> (j'espère qu'ils sont sur deux lignes) en utilisant CSS?

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

Comme vous le voyez, j'utilise <br/> pour séparer des éléments et obtenir des espaces, existe-t-il une meilleure façon de le faire?

htmlcsslayout
10
Steven
#detail {margin-bottom:5px;}
13
Paul Creasey

Vous pouvez également envelopper votre texte dans des champs d'étiquette, de sorte que votre formulaire sera plus facilement explicable sémantiquement.

N'oubliez pas de faire flotter les étiquettes et les entrées vers la gauche et de leur ajouter une largeur spécifique, ainsi que le formulaire qui les contient. Vous pouvez ensuite ajouter des marges aux deux pour ajuster l'espacement entre les lignes (vous comprenez bien entendu qu'il s'agit d'un balisage assez minimal qui s'attend à ce que le contenu soit aussi important que certaines limites).

De cette façon, vous n'aurez plus besoin d'ajouter d'autres éléments, juste les paires étiquette-entrée, toutes enveloppées dans un élément de formulaire.

Par exemple:

<form>
<label for="txtName">Name</label>
<input id"txtName" type="text">
<label for="txtEmail">Email</label>
<input id"txtEmail" type="text">
<label for="txtAddress">Address</label>
<input id"txtAddress" type="text">
...
<input type="submit" value="Submit The Form">
</form>

Et le css sera:

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*/
}
4
dizzy_fingers

CSS:

form div {
  padding: x; /*default div padding in the form e.g. 5px 0 5px 0*/
  margin: y; /*default div padding in the form e.g. 5px 0 5px 0*/
}
.divForText { /*For Text line only*/
  padding: a;
  margin: b;
}
.divForLabelInput{ /*For Text and Input line */
  padding: c;
  margin: d;
}
.divForInput{ /*For Input line only*/
  padding: e;
  margin: f;
}

HTML:

<div class="divForText">some text</div>
<input ..... />
<div class="divForLabelInput">some label <input ... /></div>
<div class="divForInput"><input ... /></div>
2
o.k.w
#input {
    margin:0 0 10px 0;
}
1
Davey

Vous n'avez pas besoin de tout insérer dans une DIV pour obtenir un style de base sur les entrées.

input [type = "text"] {margin: 0 0 10px 0;}

fera l'affaire dans la plupart des cas.

Sémantiquement, une balise est correcte entre les éléments pour les positionner. Lorsque vous utilisez plusieurs éléments <br/> (qui sont des éléments sémantiques) pour obtenir des effets esthétiques, vous indiquez que vous mélangez les responsabilités et vous devez envisager de revenir à la base.

0
user164226

Vous pouvez les formater comme tableau !!

form {
  display: table;
}
label {
  display: table-row;
}
input {
  display: table-cell;
}
p1 {
  display: table-cell;
}
<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>

0
Harshit Nadda

Essayez de minimiser autant que possible l'utilisation de <br>. Le HTML est supposé porter le contenu et la structure, <br> non plus. Une solution simple consiste à envelopper vos éléments d’entrée dans des éléments <p>, comme suit:

<form name="publish" id="publish" action="publishprocess.php" method="post">

    <p><input type="text" id="title" name="title" size="60" maxlength="110" value="<?php echo $title ?>" /> - Title</p>
    <p><input type="text" id="contact" name="contact" size="24" maxlength="30" value="<?php echo $contact ?>" /> - Contact</p>

    <p>Task description (you may include task description, requirements on bidders, time requirements, etc):</p>
    <p><textarea name="detail" id="detail" rows="7" cols="60" style="font-family:Arial, Helvetica, sans-serif"><?php echo $detail ?></textarea></p>

    <p><input type="text" id="price" name="price" size="10" maxlength="20" value="<?php echo $price ?>" /> - Price</p>

    <p><input class="tagvalidate" type="text" id="tag" name="tag" size="40" maxlength="60" value="<?php echo $tag ?>" /> - Skill or Knowledge Tags</p>
    <p>Combine multiple words into single-words, space to separate up to 3 tags (example:photoshop quantum-physics computer-programming)</p>

    <p>District Restriction:<?php echo $locationtext.$cityname; ?></p>

    <p><input type="submit" id="submit" value="Submit" /></p>
</form>
0
vrutberg