Empêcher le retour à la ligne entre deux formulaires

**piotrr** · 03/02/2009, 14h14

J'ai les deux formulaires suivants et j'aimerai qu'ils s'affichent sur la même ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<form>
test
</form>
 
<form >
test2
</form>

Je sais qu'il existe le style 'white-space:nowrap' mais il n'a aucun effet ici.

Comment empêcher le retour à la ligne entre les deux formulaires ?

merci

**Macmillenium** · 03/02/2009, 14h28

Bonjour,

Form est un élément de type bloc, le comportement que tu vois est tout a fait normal.
Pour placer tes formulaires un a coté de l'autre, tu as deux choix :
- Avec le positionnement flottant :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
.mesForms { float:left; }

Ou avec display:inline-block :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
.mesForms { display:-moz-inline-block; /** Indispensable pour Firefox2 et inférieurs **/ display:inline-block;  }

**AJemni** · 03/02/2009, 15h56

Voici une solution :

HTML

<body>
<form id="form1" class="mesForms">
</form>
<form id="form2" class="mesForms">
</form>
</body>

CSS

.mesForms
{
position:absolute;
width:49%;
height:100%;
top:0px;
}
#form1
{
left:0px;
background-color:Black; /*Pour visualiser la form*/
}
#form2
{
right:0px;
background-color:Blue ; /*Pour visualiser la form*/
}

**StAfX** · 03/02/2009, 16h21

Et pourquoi pas tout simplement :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
form {
    display: block;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<form>
test
</form>
 
<form >
test2
</form>

Si tu peux gérer ton form sans qu'il soit un élément 'block', c'est le mieux, car la solution de Macmillenium fonctionne

.mesForms { display:-moz-inline-block; /** Indispensable pour Firefox2 et inférieurs **/ display:inline-block; }

mais ce n'est pas valide W3C ... (il me semble préférable de proposer au maximum des solutions valides afin d'inciter tout le monde à faire des sites correctes...)

**Macmillenium** · 03/02/2009, 16h49

Envoyé par AJemni

Voici une solution :

HTML

<body>
<form id="form1" class="mesForms">
</form>
<form id="form2" class="mesForms">
</form>
</body>

CSS

.mesForms
{
position:absolute;
width:49%;
height:100%;
top:0px;
}
#form1
{
left:0px;
background-color:Black; /*Pour visualiser la form*/
}
#form2
{
right:0px;
background-color:Blue ; /*Pour visualiser la form*/
}

Pas la peine de se compliquer la vie : un float left suffit largement !