Comment ne pas envelopper le contenu d'un div ?

Question

J'ai une largeur fixe div avec deux boutons à l'intérieur. Si les étiquettes des boutons sont trop longues, elles s'enroulent - un bouton reste sur la première ligne, et le bouton suivant suit en dessous de lui au lieu d'être adjacent.

Comment puis-je forcer le div à développer pour que les deux boutons soient sur une seule ligne ?

Answer 1

Essayez white-space: nowrap;

Documentation : https://developer.mozilla.org/docs/Web/CSS/white-space

Answer 2

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

Chacune d'entre elles, indépendamment, n'a pas permis d'atteindre le résultat souhaité.

Answer 3

Si vous ne vous souciez pas de la largeur minimale de la division et que vous ne voulez pas qu'elle s'étende sur l'ensemble du conteneur, vous pouvez la faire flotter vers la gauche - les divisions flottées s'étendent par défaut pour soutenir 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>

Answer 4

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

Vous pouvez émuler la propriété min-width des anciens navigateurs IE en utilisant des expressions CSS ou en utilisant auto width 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>

Answer 5

Si l'on oblige les boutons à rester sur la même ligne, ils dépasseront la largeur fixe de la division dans laquelle ils se trouvent. Si cela vous convient, vous pouvez créer une autre division à l'intérieur de celle que vous avez déjà. La nouvelle division contiendra à son tour les boutons et aura une largeur fixe correspondant à l'espace dont les deux boutons ont besoin pour rester sur 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 pouvez envisager débordement pour le morceau de contenu situé à l'extérieur de l'élément d'information. parentDiv frontière.

Bonne chance !