Comment ne pas envelopper le contenu d'une div?

244

J'ai une largeur fixe divavec deux boutons. Si les étiquettes des boutons sont trop longues, elles s'habillent - un bouton reste sur la première ligne, et le bouton suivant suit en dessous au lieu d'être adjacent.

Comment puis-je forcer l' divextension pour que les deux boutons soient sur une seule ligne?

html css JamesBrownIsDead
la source
Je ne peux même pas me connecter avec mon OpenID à doctype, donc je pense que la question appartient le mieux ici.
Stefan Kendall
3
@nicholaides Je suis d'accord que cela fonctionnerait sur doctype mais je pense que c'est tout aussi légitime sur SO.
TM.

Réponses:

73

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

Chacun d'eux, indépendamment, n'a pas atteint le résultat souhaité.

Chris Nolet
la source
7

Je ne connais pas le raisonnement derrière cela, mais j'ai défini mon conteneur parent sur display:flexet les conteneurs enfants sur display:inline-blocket ils sont restés en ligne malgré la largeur combinée des enfants dépassant le parent.

N'a pas besoin de jouer avec max-width, max-height, white-spaceou quoi que ce soit d' autre.

J'espère que cela aide quelqu'un.

elPastor
la source
1
Cela a fonctionné pour moi lorsque les autres approches énumérées ci-dessus ne l'ont pas fait. Tout ce dont j'avais besoin, c'était display: flex. Je n'avais besoin de rien d'autre.
HerrimanCoder
4

Si vous ne vous souciez pas d'une largeur minimale pour le div et que vous ne voulez vraiment pas que le div s'étende sur tout le conteneur, vous pouvez le faire flotter à gauche - les divs flottants s'étendent par défaut pour prendre en charge 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>
Nicholas Becker
la source
0

Si votre div a une largeur fixe, elle ne devrait pas s'étendre, car vous avez fixé sa largeur. Cependant, les navigateurs modernes prennent en charge une min-widthpropriété CSS.

Vous pouvez émuler la propriété min-width dans les anciens navigateurs IE en utilisant des expressions CSS ou en utilisant la largeur automatique et en ayant un objet d'espacement dans le conteneur. Cette solution n'est pas élégante 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>
M. brillant et nouveau 安 宇
la source
-2

Forcer les boutons à rester dans la même ligne les fera dépasser la largeur fixe du div dans lequel ils se trouvent. Si cela vous convient, vous pouvez faire un autre div à l'intérieur du div que vous avez déjà. Le nouveau div maintiendra à son tour les boutons et aura la largeur fixe de l'espace nécessaire aux deux boutons pour rester sur une seule 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 voudrez peut-être considérer la propriété de débordement pour le morceau de contenu en dehors de la parentDivbordure.

Bonne chance!

Zoid
la source