Comment ne pas envelopper le contenu d'un div?

J'ai une largeur fixe div avec deux boutons en elle. Si les étiquettes des boutons sont trop longs, ils ajoutent un bouton reste sur la première ligne, et le bouton suivant suit en dessous au lieu d'à côté.

Comment puis-je forcer le div pour étendre de sorte que les deux boutons sont sur une seule ligne?

  • Je ne peux même pas vous connecter avec mon OpenID pour doctype, donc il me semble que la question de la meilleure appartient ici.
  • Je suis d'accord qu'il allait travailler sur le doctype mais je pense que c'est tout à fait légitime sur ainsi.
  • Je corrige la position des mains.
InformationsquelleAutor JamesBrownIsDead | 2009-11-09
  1. 439

    Essayer white-space: nowrap; . . .

    • Pour info: Selon MDN docs sur white-space, le nowrap valeur est prise en charge dans IE 6+, mais d'autres valeurs sont seulement IE 8+
    InformationsquelleAutor Marek Karbarz
  2. 73

    Une combinaison des deux float: left; white-space: nowrap; a fonctionné pour moi.

    Chacun d'eux indépendamment de ne pas obtenir le résultat désiré.

    InformationsquelleAutor Chris Nolet
  3. 5

    Je ne sais pas le raisonnement derrière cela, mais j'ai mis mon conteneur parent à display:flex et l'enfant conteneurs à display:inline-block et ils sont restés inline malgré la largeur combinée des enfants dépassant le parent.

    N'avait pas besoin de faire joujou avec max-width, max-height, white-space, ou quoi que ce soit d'autre.

    Espère que ça aide quelqu'un.

    • Cela a fonctionné pour moi, quand d'autres approches présentées ci-dessus n'a pas. J'avais besoin d' display: flex. N'a pas besoin d'autre chose.
    InformationsquelleAutor elPastor
  4. 4

    Si vous n'avez pas de soins sur un minimum de la largeur de la div et vraiment ne veulent pas la div de développer à travers tout le récipient, vous pouvez flotter à gauche -- flottait divs par défaut étendre à l'appui de leur contenu, comme suit:

    <form>
    <div style="float: left; background-color: blue">
        <input type="button" name="blah" value="lots and lots of characters"/>
        <input type="button" name="blah2" value="some characters"/>
    </div>
</form>
    InformationsquelleAutor Nicholas Becker
  5. 0

    Si votre div a une largeur fixe, il ne devrait pas se développer, parce que vous l'avez résolu de sa largeur. Cependant, des navigateurs prennent en charge un min-width propriété CSS.

    Vous pouvez émuler le min-width de la propriété dans les vieux navigateurs IE en utilisant les expressions CSS ou par l'utilisation de l'auto largeur et ayant une entretoise objet dans le conteneur. Cette solution n'est pas élégant, mais peut faire l'affaire:

    <div id="container" style="float: left">
  <div id="spacer" style="height: 1px; width: 300px"></div>
  <button>Button 1 text</button>
  <button>Button 2 text</button>
</div>
    InformationsquelleAutor Mr. Shiny and New 安宇
  6. -2

    Forçant les boutons de rester dans la même ligne de les faire aller au-delà de l'fixe la largeur de la div, ils sont. Si vous êtes d'accord avec cela, alors vous pouvez faire un autre div à l'intérieur de la div que vous avez déjà. La nouvelle div à son tour, permettra de maintenir les boutons et ont la largeur fixe de cependant de beaucoup d'espace, les deux boutons doivent rester dans une ligne.

    Voici un exemple:

    <div id="parentDiv" style="width: [less-than-what-buttons-need]px;">
    <div id="holdsButtons" style="width: [>=-than-buttons-need]px;">
       <button id="button1">1</button>
       <button id="button2">2</button>
    </div>
</div>

    Vous pourriez envisager de débordement propriété pour le morceau de contenu en dehors de la parentDiv frontière.

    Bonne chance!

    InformationsquelleAutor Zoid