Affichage de deux entrées uns à côté des autres avec une étiquette au-dessus de chaque html

Je veux faire quelque chose comme ceci

USER         EMAIL
input        input

Mais je ne peux pas comprendre comment faire pour obtenir l'affichage de cette manière. Fondamentalement, je veux que chaque ensemble de label + champ de saisie à un div, mais je veux que les divs d'être mis de côté par côté. Je suis peut-être en utilisant le mauvais balises parce que je suis un html noobie ><

  • avec un peu de css, vous pouvez le faire facilement.
InformationsquelleAutor user1529956 | 2013-11-28
  1. 9

    div est un élément de niveau bloc, cela signifie qu'il va prendre l'ensemble de l'espace horizontal par défaut, afin de les aligner côte à côte, vous devez float eux le reste vous avez besoin pour utiliser display: inline-block

    Démo

    HTML

    <div>
    <label>Hello</label>
    <input type="text" />
</div>
<div>
    <label>Hello</label>
    <input type="text" />
</div>

    CSS

    div {
    display: inline-block;
}

div label {
    display: block;
}
    • Merci. Le flotteur qu'il obtient à la droite, mais comment puis-je garder les étiquettes au-dessus du champs de saisie? Lorsque j'utilise un <br> elle fait une décale tout vers le bas, non seulement les éléments de ce bloc
    • Oui cela peut être une option 🙂
    • J'ai contribué à une solution, vous pouvez le renvoyer 🙂
    • merci! Le inline-block était exactement ce dont j'avais besoin. Passé trop de temps à essayer de le faire avec juste des balises html >.<
    InformationsquelleAutor Mr. Alien
  2. 1

    si vous souhaitez utiliser la balise, puis vous pouvez atteindre le résultat souhaité par le code suivant--

    <table>
<tr>
    <td>USER</td>
    <td>EMAIL</td>
</tr>
<tr>
    <td><input type="text" name="user"></td>
    <td><input type="text" name="email"></td>
</tr>

    la sortie est montré ici ---
    http://jsfiddle.net/hn3U9/

    InformationsquelleAutor Pankaj Singh