Le HTML & CSS - Force Div>Span>Span sur la Même Ligne

J'ai une structure simple:

<div></div><span></span><span></span>

mais je veux vigueur le tout sur une seule ligne! pour le moment, elles apparaissent:

<div />
<span /><span />

malheureusement, je dois AVOIR le premier élément comme un div, j'ai peu d'édition html pouvoirs que je suis d'édition par le biais d'un autre programme, le div est d'agir comme un bar à partir d'un graphique à barres (donc des coins arrondis, largeur = jquery trucs, pas de contenu et de couleur de bloc à l'intérieur), la prochaine portée est la valeur de la barre représente et la dernière travée est ce que la valeur est associée à la.

donc je veux

[____________] 25% ObjectA
[________________________] 50% ObjectB
[______] 12.5% ObjectC
[______] 12.5% ObjectD

et pas

[____________] 
25% ObjectA
[________________________] 
50% ObjectB
[______] 
12.5% ObjectC
[______] 
12.5% ObjectD
poster ici votre code..

OriginalL'auteur Phish | 2013-09-26

  1. 16

    Mettre la propriété CSS display: inline-block sur la div pour le faire agir comme un élément intégré au lieu de prendre l'ensemble de la ligne.

    Edit:

    @Mr_Green la suggestion de l'utilisation de la after pseudo-élément pour effacer chaque ligne est absolument nécessaire pour prévenir une fracture de la mise en page.

    Merci, je me sens gênée maintenant! pour être juste, c'est assez tôt le matin maintenant. Merci, il coche quand il me le permet.
    Cela fonctionne, mais parfois la seconde barre entreront également en ligne avec la première barre, si leurs largeurs sont de petite taille.
    c'est vrai, c'est probablement approprié de cas d'utilisation pour la <br /> étiquette, bien que si il n'a aucun contrôle sur le code html, peut être un flotteur de mise en page serait nécessaire.

    OriginalL'auteur Dylan MacKenzie

  2. 6

    La suggestion de Dylan va fonctionner, mais parfois, si l'un des div de largeur est très inférieure à la prochaine div entreront en ligne avec cet élément div. voir ce violon. Donc, ma suggestion est d'utiliser :after pseudo élément qui sera display: block. Ce pseudo-élément sera pour la dernière travée de chaque barre de l'article. 

    div {
    /* width and height are just for example */
    width: 100px;
    height: 50px;
    background-color: red;
    display: inline-block;
}
div+span+span:after {  /* last span element's pseudo element */
    content:"";
    display: block;
}

    Travail Violon

    OriginalL'auteur Mr_Green

  3. 3

    Depuis <div> éléments de défaut à display: block, qui prend tout largeur disponible, vous aurez besoin de le mettre à display: inline-block. Vous aurez également besoin de briser les lignes manuellement avec un <br>, ou de faire quelque chose de fantaisie sur la dernière <span> pour le faire remplir le reste de l'espace disponible.

    Sinon, envelopper chaque ligne dans un autre bloc au niveau de l'élément (comme un autre <div>) pour créer de nouvelles lignes.

    OriginalL'auteur Nils Kaspersson