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

前端之家收集整理的这篇文章主要介绍了html – 即使两个浮动物品的宽度都不够,我怎样才能确保两个浮动物品并排放置?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有以下 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/

猜你在找的HTML相关文章