จะไม่ห่อเนื้อหาของ div ได้อย่างไร?

ฉันมีความกว้างคงที่divโดยมีปุ่มสองปุ่ม หากป้ายชื่อของปุ่มยาวเกินไปพวกเขาจะพัน - ปุ่มเดียวจะอยู่ในบรรทัดแรกและปุ่มถัดไปจะอยู่ด้านล่างแทนที่จะอยู่ติดกัน

ฉันจะบังคับdivให้ขยายเพื่อให้ปุ่มทั้งสองอยู่ในหนึ่งบรรทัดได้อย่างไร

ลองwhite-space: nowrap;ดู . .

การรวมกันของทั้งสองfloat: left; white-space: nowrap;ทำงานสำหรับฉัน

แต่ละคนไม่ได้ผลลัพธ์ตามที่ต้องการ

ฉันไม่รู้เหตุผลที่อยู่เบื้องหลังสิ่งนี้ แต่ฉันตั้งค่าคอนเทนเนอร์หลักของฉันไปที่display:flexและคอนเทนเนอร์เด็กdisplay:inline-blockและพวกเขายังคงอยู่ในบรรทัดแม้จะมีความกว้างรวมของเด็กเกินกว่าผู้ปกครอง

ไม่จำเป็นต้องมีของเล่นmax-width, max-height, white-spaceหรือสิ่งอื่น

หวังว่าจะช่วยใครซักคน

หากคุณไม่สนใจเกี่ยวกับความกว้างขั้นต่ำสำหรับ div และจริงๆไม่ต้องการให้ div ขยายทั่วทั้งคอนเทนเนอร์คุณสามารถลอยไปทางซ้าย - divs ที่ลอยโดยค่าเริ่มต้นจะขยายเพื่อรองรับเนื้อหาของพวกเขาเช่น:

<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 ของคุณมีความกว้างคงที่มันไม่ควรขยายเพราะคุณคงความกว้างของมันแล้ว อย่างไรก็ตามเบราว์เซอร์ที่ทันสมัยรองรับmin-widthคุณสมบัติ CSS

คุณสามารถเลียนแบบคุณสมบัติความกว้างขั้นต่ำในเบราว์เซอร์ IE รุ่นเก่าโดยใช้นิพจน์ CSS หรือโดยใช้ความกว้างอัตโนมัติและมีวัตถุตัวเว้นวรรคในคอนเทนเนอร์ วิธีแก้ปัญหานี้ไม่สวยงาม แต่อาจทำเคล็ดลับ:

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

การบังคับให้ปุ่มอยู่ในบรรทัดเดียวกันจะทำให้พวกเขาไปไกลเกินกว่าความกว้างคงที่ของ div ที่พวกเขาอยู่ถ้าคุณไม่เป็นไรคุณสามารถสร้าง div อื่นภายใน div ที่คุณมีอยู่ได้ div ใหม่จะถือปุ่มต่าง ๆ และมีความกว้างคงที่อย่างไรก็ตามมีพื้นที่มากพอที่ปุ่มทั้งสองจะต้องอยู่ในบรรทัดเดียว

นี่คือตัวอย่าง:

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

คุณอาจต้องการพิจารณาคุณสมบัติโอเวอร์โฟลว์สำหรับเนื้อหาอันนอกparentDivขอบเขต

โชคดี!