Aligner Case à l'intérieur d'un <div>

Je semble avoir un problème étrange dont je ne peux pas comprendre pleinement.

C'est mon code html:

<div class="menu">
Por favor seleccione os conteúdos:
<br/>
<br/>
<br/>
Nome:
<input name="Nome" class="checkbox" type="checkbox" value="Nome" checked />
<br/>
<br/>
Data:
<input name="Data" class="checkbox"  type="checkbox" value="Data" checked />
<br/>
<br/>
Cliente:
<input name="Cliente" class="checkbox" type="checkbox" value="Cliente" checked />
<br/>
<br/> 
Observações:
<input name="Observações" class="checkbox"  type="checkbox" value="Observações" checked />
</div>

À l'intérieur d'une page Html avec rien d'autre que la valeur par défaut des trucs à partir de Dreamweaver, placé à l'intérieur du corps.

Avec ce css:

@charset "UTF-8";
/* CSS Document */

.menu 

{
width:300px;
margin-left: auto;
margin-right: auto;
padding:10px;
border: 1px solid #000;

 }

 .checkbox {

float:right;
}

Maintenant ce code affiche correctement dans safari, le texte sur la gauche et les cases à cocher alignés sur la droite à l'intérieur d'un div.

Dans firefox ça ne marche pas.

Les cases semblent comme ils ont laissé tomber une ligne.

Il semble être lié à un problème je ne peux pas comprendre, mais Si la case à cocher vient en premier comme:

<br/>
<input name="Cliente" class="checkbox" type="checkbox" value="Cliente" checked  />Cliente:
<br/>

Il rend la manière prévue dans Firefox, bien que comme prévu, il n'est pas bon sur safari.

Je ne peux pas l'air de trouver quoi causer la perte en ligne.

Merci.

OriginalL'auteur Marvin | 2009-07-06

  1. 7

    Flotteurs affectent uniquement le code qui suit dans le code html. Puisque vous avez l'entrée après l'étiquette, il sera flottait droit, mais sur une nouvelle ligne. Différents navigateurs rendre <br> de différentes manières.

    Une bonne manière de croix-navigateur ne les cases à cocher est 

    .cb-row {margin: 10px;clear:both;overflow:hidden;}
.cb-row label {float:left;}
.cb-row input {float:right;}

<div class="menu">
    Por favor seleccione os conteúdos:
    <div class="cb-row">
        <label for="nome">Nome:</label>
        <input id="nome" name="Nome" type="checkbox" value="Nome" checked />
    </div>
    <div class="cb-row">
        <label for="data">Data:</label>
        <input id="data" name="Data" type="checkbox" value="Data" checked />
    </div>
    <div class="cb-row">
        <label for="cliente">Cliente:</label>
        <input id="cliente" name="Cliente" type="checkbox" value="Cliente" checked />
    </div>
    <div class="cb-row">
        <label for="ob">Observações:</label>
        <input id="ob" name="Observações" type="checkbox" value="Observações" checked />
    </div>
</div>

    L'étiquette se trouve à gauche et la case à cocher se trouve à droite. Elles sont contenues dans une ligne div qui contrôle les marges entre les lignes. J'ai enlevé le class= de l'entrée et à la place de style l'entrée dans .cb-row input

    Un avantage de l'utilisation de l'étiquette avec le for= et l'entrée avec la mise en correspondance id=, c'est que lorsque vous cliquez sur l'étiquette, la case à cocher permet de sélectionner/désélectionner.

    +1 pour la sémantique de correction. Une petite chose pour corriger XHTML: checked="checked" au lieu de seulement vérifié.
    Merci c'est très utile, je suis encore à digérer. "Puisque vous avez l'entrée après l'étiquette, il sera flottait droit, mais sur une nouvelle ligne." Je n'ai pas même eu des étiquettes que j'ai? Dans une voie Im dans le besoin de quelques grave de la pratique, de vous recommander un bon livre? Je vous remercie.
    J'ai été en utilisant des étiquettes dans un sens général. "Nome:" est l'étiquette de la case s'il est marqué comme une étiquette ou non. Il a été un certain temps depuis que j'ai lu un css livre, mais si vous la recherche pour "css livre" sur stackoverflow stackoverflow.com/search?q=css+livre il ya beaucoup de ressources répertoriées.
    Bah, devrait avoir croyais de la recherche de tels thread 🙂 Si sa personne intéressée im commande: à l'épreuve des Balles Web Design: l'Amélioration de la Flexibilité et de la Protection Contre les Pires Scénarios avec XHTML et CSS et CSS Maîtrise: Avancé les Standards du Web Solutions Merci.

    OriginalL'auteur Emily