Div'in içeriği nasıl kaydırılmaz?

divİçinde iki düğme bulunan sabit genişliğim var . Düğmelerin etiketleri çok uzunsa, sarılırlar - bir düğme ilk satırda kalır ve bir sonraki düğme, bitişik yerine onun altında kalır.

divHer iki düğmenin de bir satırda olmasını sağlamak için tuşunu genişletmeye nasıl zorlayabilirim ?

Deneyin white-space: nowrap;. . .

İkisinin bir kombinasyonu float: left; white-space: nowrap;benim için çalıştı.

Her biri bağımsız olarak istenen sonucu elde edemedi.

Bunun nedenini bilmiyorum, ama ana konteyneri display:flexve çocuk konteynırlarını ayarladım display:inline-blockve ebeveynleri aşan çocukların birleşik genişliğine rağmen satır içi kaldılar.

İle oyuncak gerek yoktu max-width, max-height,white-space , ya da başka bir şey.

Umarım birine yardım eder.

Div için minimum genişlik umurumda değil ve gerçekten sadece divın tüm kapta genişlemesini istemiyorsanız, içeriğini desteklemek için varsayılan genişletme olarak solda yüzen div'ları yüzdürebilirsiniz:

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

Div'iniz sabit genişliğe sahipse genişlememelidir, çünkü genişliğini sabitlediniz. Ancak, modern tarayıcılarmin-width CSS özelliğini .

CSS ifadeleri kullanarak veya otomatik genişlik kullanarak ve kapta bir boşluk nesnesi kullanarak eski IE tarayıcılarındaki min-width özelliğini taklit edebilirsiniz. Bu çözüm zarif değil ama hile yapabilir:

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

Düğmeleri aynı satırda kalmaya zorlamak onları içinde bulundukları div'ın sabit genişliğinin ötesine geçmelerini sağlayacaktır. Bununla iyi iseniz, zaten sahip olduğunuz div içinde başka bir div yapabilirsiniz. Yeni div ise düğmeleri tutacak ve iki düğmenin bir satırda kalması için gereken genişlikteki sabit genişliğe sahip olacak.

İşte bir örnek:

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

İçeriğin dışındaki yığın için taşma özelliğini dikkate almak isteyebilirsinizparentDivKenarlığın .

İyi şanslar!