Blocs en ligne et habillage de texte avec CSS

Je veux afficher une case à cocher, suivi par le texte qui s'enroule autour de ci-dessous de lui-même. Le HTML sans CSS se présente comme suit:

<input type="checkbox" checked="checked" />
<div>Long text description here</div>

Je veux un affichage similaire à:

X   Long Text
    Description
    Here

Actuellement, il s'enroule autour comme ce

X   Long Text
Description Here

C'est facile à faire avec des tables, mais j'ai besoin d'être dans le CSS pour d'autres raisons. J'ai pensé à une combinaison de display: inline-block /float: right /clair /travées au lieu de DIVs, mais je n'ai pas eu de chance jusqu'à présent.

source d'informationauteur geographika

  1. 7

    Envelopper la case et de l'étiquette dans un div conteneur (ou li - je faire des formes avec des listes souvent) et d'appliquer

    <div class="checkbox">
  <input type="checkbox" id="agree" />
  <label for="agree">I agree with checkbox</label>
</div>




.checkbox input {
      float:left; 
      display:block;
      margin:3px 3px 0 0;
      padding:0;
      width:13px;
      height:13px;
     }

.checkbox label {
      float:left;
      display:block;
      width:auto;
     }
  2. 5

    Essayez ceci:

    input { float: left; }
div { margin-left: 40px; }

    Régler le margin-left de combien d'espace vous voulez. Le float: left sur la case qui prend essentiellement en dehors de la disposition en bloc afin de ne pas pousser vers le bas le texte.