Alignement des éléments de formulaire HTML5

Je suis nouveau sur le HTML5 pour toute l'aide que je peux obtenir est apprécié. J'ai trois champs (Nom, prénom et Date de Naissance) et je suis en train de les aligner ensemble. Je voudrais aligner les champs ensemble horizontalement et verticalement.

Voici mon code simple pour l'instant: 

<html>
<!DOCTYPE html>
<html>
<link href="styles.css" rel="stylesheet" type="text/css">
<body>
  <form>
    <label for="firstname">First Name:</label> <input name="firstname" type="text" size="50" autofocus><br>
    <label for="lastname"><br>Last Name:</label> <input type="text" name="lastname" size="50" autofocus><br>
    <label for="birthdate"><br>Birth Date:</label> <input type="date" name="bdate" size="50"><br> 
  <form> </body> </html>

Voici le CSS que j'ai:

input[type=text] {
    border: 1px solid #D4E2F1;
}

input[type=date] {
    border: 1px solid #D4E2F1;
}

input[type=color] {
    border: 1px solid #D4E2F1;
}

Je préfère ne pas utiliser des tableaux que je ne cherche pas à afficher des données tabulaires. Je suis à la recherche d'un efficace et de façon correcte pour ce faire.

Votre aide serait grandement appréciée.

Grâce.
AJ

InformationsquelleAutor user2613126 | 2013-07-24
  1. 3

    Essayez ceci:

    HTML:

    <form class="user-form">
    <div class="field">
        <label for="firstname">First Name:</label>
        <input name="firstname" type="text" size="50" autofocus />
    </div>
    <div class="field">
        <label for="lastname">Last Name:</label>
        <input type="text" name="lastname" size="50" />
    </div>
    <div class="field">
        <label for="birthdate">Birth Date:</label>
        <input type="date" name="bdate" size="50" />
    </div>
<form>

    CSS:

    .user-form { padding:20px; }

.user-form .field { padding: 4px; margin:1px; background: #eee; }

.user-form .field label { display:inline-block; width:120px; margin-left:5px; }

.user-form .field input { display:inline-block; }

    jsFiddle: http://jsfiddle.net/VuSX4/

    • bel exemple ,comment peut appliquer cela à jQuery Mobile ? en raison de la pré-définis éléments .les attributs .
    • Vous avez besoin de trouver les noms de classes css qui contrôle chaque élément. pour le dessus, vous pouvez ajouter dans .ui-input-text {width:auto !important;} et devrait être aligné. jsfiddle.net/VuSX4/2
    InformationsquelleAutor jzm
  2. 0

    Essayer cette

    HTML:

    <
    div style="display:block; position:relative; width:100(ou quelque chose)px; height:auto; margin:0px 0px auto;"
    >
    Mettre votre formulaire de balisage ici

    <
    /div>

    J'ai regardé partout pour répondre à cette question et a trouvé l'information au W3C Écoles et un peu d'essais et d'erreurs

    Cela valide à http://validator.w3.org/

    InformationsquelleAutor BolShag