CSS aligner le texte des boîtes avec des étiquettes

Mon violon assez bien le problème en évidence. Essayer d'obtenir les étiquettes pour être sur le côté gauche de chaque zone de texte, si quelqu'un pouvait aider. http://jsfiddle.net/HC64Y/

<div id="boxalign2" class="boxalign2" >                 
    <label>Hospital*:</label><input class="rounded2" required title="Hospital is required!" name="MainHospital" type="text" />  
    <label>Title*:</label><input class="rounded2" name="MainTitle" type="text"/>            
    <label>Department*:</label> <input class="rounded2" name="MainDept" type="text"/>
</div>

css

input.rounded2 {
    border: 1px solid #ccc;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 2px 2px 3px #666;
    -webkit-box-shadow: 2px 2px 3px #666;
    box-shadow: 2px 2px 3px #666;
    font-size: 20px;
    padding: 4px 7px;
    outline: 0;
    -webkit-appearance: none;

    float: left;
    display: inline-block;
    clear: left;
    width: 150px;
    text-align: right;
}

OriginalL'auteur user1 | 2013-10-31

  1. 5

    Vous de faire vos entrées inline-block, mais vous êtes aussi flottant à gauche.

    Si vous supprimez le float: left et ajouter <br> après chaque entrée, vous obtiendrez le comportement correct.

    http://jsfiddle.net/A8es3/

    Pour aligner les cases, ajouter un div wrapper autour de chaque label/input, faites votre étiquette inline-block avec une largeur fixe. Il y a d'autres façons de le faire, mais c'est à sens unique.

    http://jsfiddle.net/A8es3/1/

    Comme stolli mentionné précédemment, vous pouvez aussi simplement utiliser des le label élément que l'emballage:

    http://jsfiddle.net/A8es3/2/

    J'essaie de garder les zones de texte aligné(comme vu dans mon violon), qui est de savoir comment je suis arrivé à mon problème.
    Vous pouvez corriger cela avec un wrapper. Voir modifier.
    Génial. Merci Jeff
    De grands exemples. Très utile. Merci pour le partage.

    OriginalL'auteur Jeff B

  2. 1

    Vous pouvez donner à votre div .boxalign2 et label des largeurs fixes.

    Voir la démo http://jsfiddle.net/HC64Y/11/

    .boxalign2 {
  width:400px;
}

label {
  text-align:right;
  padding-right:20px;
  display:inline-block;
  min-width:150px;
}
    Cela fonctionne aussi bien que Jeffs réponse. Merci pour l'aide.
    pas de problème, nous sommes là pour vous aider

    OriginalL'auteur DaniP

  3. 0

    À ammend Jeff B de la réponse pour obtenir votre résultat, il suffit de donner les éléments d'une largeur dans votre css

    label {width: 100px} où " 100 " est la valeur qui semble la meilleure pour votre mise en page.

    Aussi, n'oubliez pas que le but principal d'étiquettes (en opposition à la div ou span pour l'étiquetage), c'est que les étiquettes d'agir comme un clic secondaire cible pour le contrôle auxquelles elles sont associées. Par conséquent, vous pouvez placer vos éléments dans la balise d'étiquette (<label><input /></label>) ou de les associer par id (<label for="foo"><input id="foo"/>) et donner à l'utilisateur beaucoup plus, cliquez, simplement en cliquant sur l'étiquette, ils peuvent basculer le contrôle, la saisie de texte, que ce soit. Un grand avantage dans la convivialité pour les appareils tactiles.

    OriginalL'auteur stolli

  4. 0
    <!DOCTYPE html>
<html>
<head>
    <title>Centering a form</title>
</head>
<body>
    <div class="form">
        <label>Name</label>
        <input type="text" name="name">

        <label>Email</label>
        <input type="text" name="email">

        <label>Phone</label>
        <input type="text" name="phone">
    </div>
</body>
</html>

<style type="text/css">
    .form {
        margin: 0 auto;
        width: 210px;
    }
    .form label{
        display: inline-block;
        text-align: right;
        float: left;
    }
    .form input{
        display: inline-block;
        text-align: left;
        float: right;
    }
</style>

    Démo ici: https://jsfiddle.net/durtpwvx/

    OriginalL'auteur Aravin