Wie kann man den Inhalt eines Div nicht einpacken?

243

Ich habe eine feste Breite divmit zwei Knöpfen. Wenn die Beschriftungen der Schaltflächen zu lang sind, werden sie umbrochen - eine Schaltfläche bleibt in der ersten Zeile, und die nächste Schaltfläche folgt darunter und nicht daneben.

Wie kann ich das divErweitern erzwingen , sodass sich beide Schaltflächen in einer Zeile befinden?

html css JamesBrownIsDead
quelle
Ich kann mich nicht einmal mit meiner OpenID bei doctype anmelden, daher denke ich, dass die Frage am besten hierher gehört.
Stefan Kendall
3
@icholaides Ich bin damit einverstanden, dass es auf doctype funktionieren würde, aber ich denke, dass es auch auf SO absolut legitim ist.
TM.

Antworten:

73

Eine Kombination von beiden float: left; white-space: nowrap;hat bei mir funktioniert.

Jeder von ihnen hat unabhängig voneinander nicht das gewünschte Ergebnis erzielt.

Chris Nolet
quelle
6

Ich kenne die Gründe dafür nicht, aber ich habe meinen übergeordneten Container auf display:flexund die untergeordneten Container auf gesetzt display:inline-blockund sie blieben trotz der kombinierten Breite der Kinder, die den übergeordneten übersteigen, inline.

Brauchte nicht zu Spielzeug mit max-width, max-height,white-space sonst, oder irgendetwas.

Hoffe das hilft jemandem.

elPastor
quelle
1
Dies funktionierte für mich, wenn andere oben aufgeführte Ansätze dies nicht taten. Ich brauchte nur display: flex. Ich brauchte nichts anderes.
HerrimanCoder
4

Wenn Sie sich nicht für eine Mindestbreite für das Div interessieren und wirklich nicht möchten, dass sich das Div über den gesamten Container ausdehnt, können Sie es nach links schweben lassen. Floated Divs werden standardmäßig erweitert, um ihren Inhalt zu unterstützen, wie folgt:

<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
quelle
0

Wenn Ihr Div eine feste Breite hat, sollte es nicht erweitert werden, da Sie seine Breite festgelegt haben. Moderne Browser unterstützen jedoch amin-width CSS-Eigenschaft.

Sie können die Eigenschaft min-width in alten IE-Browsern emulieren, indem Sie CSS-Ausdrücke verwenden oder die automatische Breite verwenden und ein Spacer-Objekt im Container haben. Diese Lösung ist nicht elegant, kann aber den Trick tun:

<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>
Mr. Shiny und New 安 宇
quelle
-2

Wenn Sie die Schaltflächen zwingen, in derselben Zeile zu bleiben, überschreiten sie die feste Breite des Divs, in dem sie sich befinden. Wenn Sie damit einverstanden sind, können Sie ein weiteres Div innerhalb des Divs erstellen, das Sie bereits haben. Das neue div wiederum hält die Tasten und hat die feste Breite, wie viel Platz die beiden Tasten benötigen, um in einer Zeile zu bleiben.

Hier ist ein Beispiel:

<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>

Möglicherweise möchten Sie die Überlaufeigenschaft für den Teil des Inhalts außerhalb von berücksichtigenparentDiv .

Viel Glück!

Zoid
quelle