positionnement CSS

Par Markos, il y a 12 ans

Les bases HTML/CSS

Bonjour,
J'ai lu dans de nombreux articles que la propriété "display:inline" positionne les blocs côte à côte. Ce n'est pas tout à fait vrai. A vrai dire, je ne comprends toujours pas ce que cette propriété signifie.
Soit le formulaire HTML suivant : 

<form action="" method="post">
    <div class="form-group">
        <label for="nom"></label>
        <br></br>
        <input id="nom" type="text" value="" name="nom"></input>
    </div>
    <br></br>
    <div class="error-message"></div>
    <div class="form-group">
        <label for="email"></label>
        <br></br>
        <input id="email" type="email" value="" name="email"></input>
    </div>
    <br></br>
    <div class="error-message"></div>
    <div class="form-group"></div>
    <br></br>
    <div class="error-message"></div>
    <p></p>
</form>

Si j'attribue la propriété display:inline aux balises label et input, elles se positionnent bien les unes sous les autres.
Comment faire si je souhaite faire apparaître les labels à gauche des inputs correspondants, chacun sur la même ligne ?
J'ai essayé beaucoup de combinaisons, beaucoup de propriétés float, display, position, de toutes sortes, sans pouvoir jamais parvenir à ce résultat.
Aidez-moi !

5 réponses

wilose, il y a 12 ans

Il faut simplement enlever les passages à la ligne (br):

<style>
    label, input{
        display:inline;
    }
</style>
<form action="" method="post">
    <div class="form-group">
        <label for="nom"></label>
        <input id="nom" type="text" value="" name="nom"></input>
    </div>
    <br></br>
    <div class="error-message"></div>
        <div class="form-group">
        <label for="email"></label>
        <input id="email" type="email" value="" name="email"></input>
    </div>
    <br></br>
    <div class="error-message"></div>
    <div class="form-group"></div>
    <br></br>
    <div class="error-message"></div>
    <p></p>

</form>
Markos, il y a 12 ans

Quel idiot je suis ! Je viens de m'en rendre compte !... J'ai un peu (beaucoup) honte !... J'ai posté la même question sur un autre forum, et un internaute a été - tout en restant tout à fait correct - un peu moins "diplomate" que toi, mais je l'ai entièrement mérité ! Je me suis encore rendu ridicule !

...Voilà, Voilà... ça, c'est fait...
(Oh la honte !)

Lotfi Berrahal, il y a 12 ans

L'erreur est humaine Markos et on apprend toujours de nos erreurs donc t'en fais pas et les personnes qui ne sont pas compréhensives peuvent aussi se passer de commentaire ;)

Pewel-OutOfNutella, il y a 12 ans

Les personnes qui t'envoie ballader quand tu poste gentillement une demande d'aide en étant courtois, il faut que tu les envoie ballader aussi.

Si tu demandes comme une mer**, là ok on peut comprendre que ceux qui répondent ne soient pas très diplomates.
Mais à la base, les forums de ce type sont là pour entraider, du coup ceux qui ne sont pas diplomates devraient passer leur chemin :)

Markos, il y a 12 ans

C'est rien : il m'a juste dit :

"Salut,

sais-tu à quoi sert la balise <br> ?"

Y'a pas de quoi se vexer. D'autant, comme je l'ai dit, que je l'ai bien mérité, pour mon étourderie.