即使两个浮动项目都没有足够的宽度,如何确保它们并排放置?

发布于 2024-11-16 12:11:35 字数 457 浏览 0 评论 0原文

我有以下 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

情愿 2024-11-23 12:11:36

如果您希望它们始终位于同一行,您可以合理地将两个 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/

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:

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

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/

我也只是我 2024-11-23 12:11:36

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

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

yep, you can do that by setting fixed width for the container, like so:

<div>
  <div style="width:400px">
    <div style="float: left;">
      <input type="checkbox" value="False" />
    </div>
    <div style="float: left;" >         XXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div>
  </div>
</div>
萌吟 2024-11-23 12:11:36

这就是 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文