Bagaimana tidak membungkus konten div?

243

Saya memiliki lebar tetap divdengan dua tombol di dalamnya. Jika label tombol terlalu panjang, mereka membungkus - satu tombol tetap di baris pertama, dan tombol berikutnya mengikuti di bawahnya, bukan berdekatan dengan itu.

Bagaimana saya bisa memaksa divuntuk memperluas sehingga kedua tombol berada pada satu baris?

html css

— JamesBrownIsDead
sumber

Saya bahkan tidak bisa masuk dengan OpenID saya ke DOCTYPE, jadi methinks pertanyaan terbaik milik sini.

— Stefan Kendall

3

@nicholaides Saya setuju ini akan berfungsi pada DOCTYPE tapi saya pikir itu benar-benar sah pada SO juga.

— TM.

454

Coba white-space: nowrap;. . .

— Marek Karbarz
sumber

6

FYI: Menurut dokumen MDN padawhite-space , nowrapnilainya didukung di IE 6+, meskipun nilai lain hanya IE 8+

— Walter Roman

73

Kombinasi keduanya float: left; white-space: nowrap;bekerja untuk saya.

Masing-masing secara mandiri tidak mencapai hasil yang diinginkan.

— Chris Nolet
sumber

6

Saya tidak tahu alasan di balik ini, tapi saya mengatur wadah orang tua saya display:flexdan wadah anak untuk display:inline-blockdan mereka tetap sejalan meskipun lebar gabungan anak-anak melebihi orang tua.

Tidak perlu mainan dengan max-width, max-height,white-space , atau apa pun.

Semoga itu bisa membantu seseorang.

— elPastor
sumber

1

Ini bekerja untuk saya ketika pendekatan lain yang tercantum di atas tidak. Yang saya butuhkan adalah display: flex. Tidak butuh yang lain.

— HerrimanCoder

4

Jika Anda tidak peduli dengan lebar minimum untuk div dan benar-benar hanya tidak ingin div untuk meluas di seluruh wadah, Anda dapat mengapung ke kiri - div yang melayang secara default meluas untuk mendukung kontennya, seperti:

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

0

Jika div Anda memiliki lebar tetap, itu tidak boleh melebar, karena Anda telah memperbaiki lebarnya. Namun, browser modern mendukung amin-width properti CSS.

Anda dapat meniru properti min-width di browser IE lama dengan menggunakan ekspresi CSS atau dengan menggunakan lebar otomatis dan memiliki objek spacer di dalam wadah. Solusi ini tidak elegan tetapi dapat melakukan trik:

<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 dan New 安宇
sumber

-2

Memaksa tombol tetap di baris yang sama akan membuat mereka melampaui lebar tetap dari div mereka masuk Jika Anda baik-baik saja dengan itu maka Anda dapat membuat div lain di dalam div yang sudah Anda miliki. Div baru pada gilirannya akan menahan tombol dan memiliki lebar tetap berapa banyak ruang yang perlu kedua tombol tetap dalam satu baris.

Berikut ini sebuah contoh:

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

Anda mungkin ingin mempertimbangkan properti melimpah untuk potongan konten di luarparentDiv perbatasan.

Semoga berhasil!

— Kosong
sumber