即使两个浮动项目都没有足够的宽度,如何确保它们并排放置?
我有以下 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 操作。)
I have the following HTML:
<div >
<div >
<div style="float: left;">
<input type="checkbox" value="False" />
</div>
<div style="float: left;" > XXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div>
</div>
</div>
It displays the XXX to the right of the checkbox. However, if I reduce the screen width, the XXX goes under the checkbox.
Is there any way that I can "lock" the XXX text inside the DIV so the XXXX always appears to the right and on the same line?
(Note that I want to keep using DIV as later on I do some jQuery things with the DIVs.)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
如果您希望它们始终位于同一行,您可以合理地将两个 div 合并为一个,仍然浮动,并使用
white-space
属性将其保持在一行上:Starx 的答案解释得很清楚那么为什么用两个单独的浮动 div 来做到这一点并不可行。
编辑: http://jsfiddle.net/nkorth/qQSCV/
If you want them to always be on the same line, you can reasonably combine the two divs into one, still floated, and use the
white-space
property to keep it on one line:Starx's answer explains very well why it's not really feasible to do this with two separate floated divs.
edit: http://jsfiddle.net/nkorth/qQSCV/
是的,您可以通过设置容器的固定宽度来做到这一点,如下所示:
yep, you can do that by setting fixed width for the container, like so:
这就是
float:left
应该做的。它将尽可能保留在左侧。如果前面的元素也向左浮动,如果空间可用,它将尝试与它一起向左浮动。这就是为什么当您调整屏幕大小并且没有足够的空间让 div 与上一个元素一起浮动到上一个元素时,它会向左浮动到上一个元素下方。That is what
float:left
is supposed to do. It will remain in the left side as much as possible. If the element before is also floated to the left side, it will try to float to left, together with it, if the space is available. That's why when you resize your screen and there is not enought space for the div to float to the together with previous element, it will float to the left, down the previous element.