html – 即使两个浮动物品的宽度都不够,我怎样才能确保两个浮动

发布时间：2020-12-14 22:34:41 所属栏目：资源来源：网络整理

导读：我有以下 HTML： div div div style="float: left;" input type="checkbox" value="False" / /div div style="float: left;" XXXXXXXXXXXXXXXXXXXXXXXXXXXXX /div /div/div 它会显示复选框右侧的XXX.但是,如果我缩小屏幕宽度,则XXX会进入复选框. 有什么方法

我有以下 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事情.)

解决方法

如果你希望它们总是在同一行上,你可以合理地将两个div组合成一个仍然浮动的div,并使用white-space属性将它保持在一行：

<div>
  <div>
    <div style="float:left; white-space:nowrap;">
      <input type="checkbox" value="false" />         XXXXXXXXXXXXXXXXXXXXXXX 
    </div>
  </div>
</div>

Starx的答案很好地解释了为什么使用两个独立的浮动div来实现这一点并不可行.

编辑：http://jsfiddle.net/nkorth/qQSCV/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!