即使两个浮动物品的宽度不足,我怎样才能确保两个浮动物品并排放置？

Question

我有以下HTML:

<div  >
  <div >
    <div style="float: left;">
      <input type="checkbox" value="False" />
    </div>
    <div style="float: left;" >         XXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div>
  </div>
</div>

它会显示复选框右侧的XXX.但是,如果我缩小屏幕宽度,则XXX会进入复选框.

有什么方法可以"锁定"DIV内的XXX文本,这样XXXX总是出现在右边和同一行吗？

(注意我想继续使用DIV,因为我在DIV上做一些jQuery事情.)

Answer 1

是的，您可以通过设置容器的固定宽度来做到这一点，如下所示：

<div>
  <div style="width:400px">
    <div style="float: left;">
      <input type="checkbox" value="False" />
    </div>
    <div style="float: left;" >         XXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div>
  </div>
</div>