Espacer mes champs text

Version imprimable

1 pièce(s) jointe(s)

Bonsoir à tous,

Je rencontre un petit problème que voici:

Pièce jointe 176207

Donc j'aimerais espacer chacun de mes label+input mais je ne sais pas comment faire, j'ai essayé avec des marge mais je n'ai jamais obtenu ce que je voulais.

Voici mon code HTML:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<form method="post" id="myform">
	<fieldset class="cadre">
	<legend>Informations g&eacute;n&eacute;rales</legend>	
	<tr>
    <p class="marge"><label for="nom">Nom de l\'op&eacute;ration :</label>
    <input type="text" name="nom" id="nom" value="" disabled />
	<label for="code10">Code 10 :</label>
    <input type="text" name="code10" id="code10" value="" disabled />
	<label for="prio">Priorit&eacute; globale :</label>
    <input type="text" name="prio" id="prio" value="" disabled /></p>	
	</tr>							
	<tr>
	<p class="marge"><label for="inge">Ing&eacute; radio :</label>
    <input type="text" name="inge" id="inge" value="" disabled />
	<label for="CDPN">CPD N&eacute;go :</label>
    <input type="text" name="CDPN" id="CDPN" value="" disabled/>	
	<label for="CDPN">CPD Travaux :</label>
    <input type="text" name="CDPN" id="CDPN" value="" disabled/></p>
	</tr>
	<tr>
	<p class="marge"><label for="lotGSM">Lot GSM ADDOO :</label>
    <input type="text" name="lotGSM" id="lotGSM" value="" disabled />
	<label for="lotUMTS">Lot UMTS ADDOO :</label>
    <input type="text" name="lotUMTS" id="lotUMTS" value="" disabled/>	
	<label for="lotLTE">Lot LTE ADDOO :</label>
    <input type="text" name="lotLTE" id="lotLTE" value="" disabled/></p>
	</tr>
</fieldset>

Et voici mon CSS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
#bloc{
    display: table;
    table-layout: fixed;
}
#bloc > div{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
 
.cadre {
    background-color: #ffffff;
    margin: 0 auto 15px auto;
    padding: 10px;
    border: 1.5px solid #9E9E9E;
 
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    behavior: url(border-radius.htc);
 
    background-image: -moz-linear-gradient(top, #ffffff, #f4f4f4);
	display:block;
 
    clear:none;
}
 
legend {
    color: #eeab69;
    font-size: 17px;
	font-weight:bold;
    padding: 0;
}
 
form#myform label { display:inline; }
form#myform input { display:inline; margin-bottom:10px;}
 
.marge {
margin:20px;
}

Désolé si c'est un peu sale mais je débute et j'étais préssé ^^

Merci de votre aide

28/04/2015, 08h29
pc75

Bonjour,

Et en insérant des   entre des label+input, ça ne te convient pas ?

Oui tu peux faire comme a dit pc75.

En ce qui me concerne j'aime bien aligner les choses comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<link rel="stylesheet" type="text/css" href="style.css"   />
 
<form method="post" id="myform">
	<fieldset class="cadre">
	<legend>Informations g&eacute;n&eacute;rales</legend>	
        <table>
	<tr>
            <td><p class="marge"><label for="nom">Nom de l\'op&eacute;ration :</label></td>
            <td><input type="text" name="nom" id="nom" value="" disabled />&nbsp;&nbsp;</td>
            <td><label for="code10">Code 10 :</label></td>
            <td><input type="text" name="code10" id="code10" value="" disabled />&nbsp;&nbsp;</td>
            <td><label for="prio">Priorit&eacute; globale :</label></td>
            <td><input type="text" name="prio" id="prio" value="" disabled /></p>&nbsp;&nbsp;</td>	
	</tr>							
	<tr>
            <td><p class="marge"><label for="inge">Ing&eacute; radio :</label></td>
            <td> <input type="text" name="inge" id="inge" value="" disabled />&nbsp;&nbsp;</td>
            <td><label for="CDPN">CPD N&eacute;go :</label></td>
            <td>  <input type="text" name="CDPN" id="CDPN" value="" disabled/>&nbsp;&nbsp;	</td>
            <td><label for="CDPN">CPD Travaux :</label></td>
            <td> <input type="text" name="CDPN" id="CDPN" value="" disabled/></p>&nbsp;&nbsp;</td>
	</tr>
	<tr>
            <td><p class="marge"><label for="lotGSM">Lot GSM ADDOO :</label></td>
            <td><input type="text" name="lotGSM" id="lotGSM" value="" disabled /></td>
            <td><label for="lotUMTS">Lot UMTS ADDOO :</label></td>
            <td>  <input type="text" name="lotUMTS" id="lotUMTS" value="" disabled/></td>	
            <td><label for="lotLTE">Lot LTE ADDOO :</label></td>
            <td> <input type="text" name="lotLTE" id="lotLTE" value="" disabled/></p></td>
	</tr>
        </table>
</fieldset>

28/04/2015, 14h18
Bovino

Heu non... désolé pour pc75, mais il ne faut surtout pas faire comme il l'indique ! :aie:

Faire de la mise en page à grands coups d'espaces insécables est la pire des solutions car elle est beaucoup trop figée, notamment de nos jours où la diversité des appareils susceptibles de lire un document Web explose.
Il faut utiliser les feuilles de style pour ce genre de chose, notamment avec les marges externes, les types de display ou autres.
06/05/2015, 14h42
sourcilpower

bonjour,

Je pense qu'en utilisant un tableau html tu devra t'en sortir facilement si tu es débutant sinon penche toi plutot sur le css en jouant avec les tailles
07/05/2015, 10h40
black-hawk-down

Non plus, les tableaux ne sont pas prévus pour ça !!!

Tu veux faire quoi exactement ?

Si c'est aligner les label et input, avec display inline-block et width tu devrais t'en sortir.
07/05/2015, 11h10
sourcilpower

Certe mais si il est débutant que c'est juste pour ce bout de code les tableau feront très bien l'affaire
07/05/2015, 11h17
Bovino

Un autre point de vue serait de considérer qu'un débutant cherche à apprendre et à s'améliorer et que lui conseiller des techniques obsolètes depuis plus de 10 ans ne rend service à personne.
07/05/2015, 11h18
black-hawk-down

Citation:

Envoyé par sourcilpower

Certe mais si il est débutant que c'est juste pour ce bout de code les tableau feront très bien l'affaire

C'est justement l'occasion d'apprendre, tu ne crois pas ?!

Parce qu'être débutant toute sa vie parce qu'on a choisi la facilité, ce n'est pas se rendre service.
07/05/2015, 11h43
sourcilpower

oui biensur j'ai juste proposer un solution rapide apres pour que ca soit propre il peut attribuer une class a tous ces labels et lui mettre une taille fix