Faire une <ul> affichage de l'étiquette sur la même ligne que le texte

Je suis en train de faire un <ul> affichage de l'étiquette en ligne avec une ligne de texte. voici le code HTML.

<li>
  <input type="checkbox" id="449" value="Whats that?" class="checkbox"><label for="449">Whats that?</label>
  <ul class="449">
    <li>{...removed...}</li>
    <li>{...removed...}</li>
    <li>{...removed...}</li>
    <li>{...removed...}</li>
  </ul>
</li>

Ce qu'il rend comme aujourd'hui, c'est

Whats that?
  Li element
  Li element
  Li element
  Li element

Mais je veux qu'il render comme ceci:

Whats that? Li element
            Li element
            Li element
            Li element

Ce que les règles CSS dois-je mettre dans cette <ul>? Et passons sur le fait que le nom de la classe, c'est pour loufoque javascript fins. Merci!!!!

Mettre l'ENTRÉE dans l'ÉTIQUETTE. Flottent alors l'ÉTIQUETTE de gauche.
Je pense que vous devez utiliser chaque élément de la colonne (ENTRÉE et UL) et d'utiliser float/marge pour obtenir la droite (mais juste spéculer ici.)

OriginalL'auteur Madison Williams | 2011-01-28

  1. 5

    Float:

    p, ul {
    float: left;
    margin: 0;
    padding: 0;
}
li {
    list-style-type: none;
}

<p>Whats that?</p>
<ul>
    <li>Li element</li>
    <li>Li element</li>
    <li>Li element</li>
    <li>Li element</li>
</ul>
    Cela fonctionne bien.
    oui c'est le cas en effet. Merci Dolph... Lundgren j'espère?
    JE PUNIR LES COUPABLES! 😉
    que faire si je voulais centre dans un div?

    OriginalL'auteur Dolph

  2. 3
    ul.449{
 display: inline-block;   
}

    Va l'obtenir en ligne. L'alignement vertical est un peu bizarre.

    Oui, il est certainement il inline... Toutes les suggestions sur la fixation de la verticale aligner? Éventuellement une règle dans le parent de la balise li?
    IE ne supporte pas inline-block sur UL. Aussi, aucun navigateur n'accepte stylings d'où le nom de classe commence par un nombre.
    IE n'est pas un sujet de préoccupation dans ce projet. Juste besoin de travailler pour Gecko et Webkit. Aussi, je vais probablement le style de la ce de l'UL par l'intermédiaire d'un parent, plutôt que de la classe directement. Comme je l'ai dit avant, le nom de la classe n'est pas pour le style; c'est pour le javascript.
    Le plus proche (pas parfait) pour obtenir le haut pour le line up est l'ajout de vertical-align:top à votre inline-block à la règle.
    Williams Droit. Je dis juste que toute solution qui utilise ul.449 que le sélecteur ne fonctionne pas. Je l'ai essayé.

    OriginalL'auteur rcravens

  3. 2

    Je suggère ul.449 { display:inline-table} mais il soutiendra ie8+. Une autre solution avec la croix-prise en charge du navigateur, je suppose, pourrait être à float:left; tous les éléments (input, label, ul) et ajouter margin:0; la ul

    Première approche: http://jsbin.com/axako3/2

    Deuxième approche: http://jsbin.com/axako3/3

    OriginalL'auteur Sotiris