Làm thế nào để không bọc nội dung của một div?

Tôi đã có một chiều rộng cố định divvới hai nút trong đó. Nếu nhãn của các nút quá dài, chúng sẽ quấn - một nút vẫn ở dòng đầu tiên và nút tiếp theo nằm bên dưới nó thay vì liền kề với nó.

Làm cách nào tôi có thể buộc divmở rộng để cả hai nút nằm trên một dòng?

Hãy thử white-space: nowrap;. . .

Một sự kết hợp của cả hai float: left; white-space: nowrap;làm việc cho tôi.

Mỗi người trong số họ độc lập không đạt được kết quả mong muốn.

Tôi không biết lý do đằng sau điều này, nhưng tôi đặt thùng chứa của cha mẹ display:flexvà các thùng chứa con thành display:inline-blockvà chúng vẫn nằm trong dòng mặc dù chiều rộng kết hợp của con vượt quá bố mẹ.

Không cần phải đùa giỡn với max-width, max-height, white-space, hoặc bất cứ điều gì khác.

Hy vọng rằng sẽ giúp được ai đó.

Nếu bạn không quan tâm đến chiều rộng tối thiểu cho div và thực sự không muốn div mở rộng trên toàn bộ container, bạn có thể thả nó sang trái - div nổi theo mặc định mở rộng để hỗ trợ nội dung của chúng, như vậy:

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

Nếu div của bạn có chiều rộng cố định thì không nên mở rộng, vì bạn đã sửa chiều rộng của nó. Tuy nhiên, các trình duyệt hiện đại hỗ trợ một min-widththuộc tính CSS.

Bạn có thể mô phỏng thuộc tính độ rộng tối thiểu trong các trình duyệt IE cũ bằng cách sử dụng các biểu thức CSS hoặc bằng cách sử dụng độ rộng tự động và có một đối tượng đệm trong vùng chứa. Giải pháp này không thanh lịch nhưng có thể thực hiện mẹo:

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

Việc buộc các nút ở cùng một dòng sẽ khiến chúng vượt quá độ rộng cố định của div mà chúng đang ở. Nếu bạn ổn với điều đó thì bạn có thể tạo một div khác bên trong div bạn đã có. Lần lượt div mới sẽ giữ các nút và có chiều rộng cố định tuy nhiên nhiều không gian hai nút cần ở trong một dòng.

Đây là một ví dụ:

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

Bạn có thể muốn xem xét thuộc tính tràn cho phần nội dung bên ngoài parentDivđường viền.

Chúc may mắn!