如何使用 float:left 禁用跳转到 div 中的下一行？答案

【问题标题】：How to disable jumping to next line in div with float: left?如何使用 float:left 禁用跳转到 div 中的下一行？
【发布时间】：2012-05-23 22:12:52
【问题描述】：

我有一个问题，正如我在标题中描述的那样。我有菜单，我在里面使用 float:left 作为 div。菜单框包含搜索框，当我调整页面大小时，当网站宽度太小时我不希望搜索框跳到下一行，我想“剪切/隐藏”这部分搜索框。

我尝试过使用 inline-block、position:absolute、overflow:hidden，但没有任何效果。

示例（我希望这个绿色框留在第一行，并且我不想因为隐藏元素而有水平滚动条，我也希望“内容”能够调整大小，即使我们通过了大小限制，这保证显示每个菜单项）：

        <!DOCTYPE html>
        <html>
        <head>
        <meta charset=utf-8 />

        <style>
          html, body {width:100%}
          #header { width: 100%; height: 50px; }
          #menu_box { width: 100%; height: 50px; background: red; }
          .menu_item { background: green; width: 100px; height: 25px; float: left; }
          #content{ width: 100%; height: 100%; text-align: center; }
        </style>
        </head>
        <body>
        <div id="header">
          <div id="menu_box"> 
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
          </div>
        </div>

        <div id="content">
        text which align is center
        </div>
        </body>
        </html>

EDIT2，现在你应该明白我的意思了，在这种情况下它不能正常工作，溢出：隐藏什么都不做（这是我尝试过的第一件事）。看内容。为了避免问题：是的，我需要使用 css 表。

        <!DOCTYPE html>
        <html>
        <head>
        <meta charset=utf-8 />

        <style>
          html, body {width:100%}
          #header { display: table-cell; width: 100%; height: 50px; }
          #menu_box { width: 800px; height: 50px; background: red; overflow: hidden; }
          .menu_item { background: green; width: 100px; height: 25px; float: left;}
          #content{ display:table-cell; width: 100%; height: 100%; text-align: center; }

          .row { display: table-row; width: 100%; }
          #table {
            width: 100%;
            height: 100%;
            border-collapse: collapse;
        }
        </style>
        </head>
        <body>
        <div id="table">
            <div class="row">
                <div id="header">
                  <div id="menu_box"> 
                    <div class="menu_item">sd</div>
                    <div class="menu_item">sd</div>
                    <div class="menu_item">sd</div>
                    <div class="menu_item">sd</div>
                    <div class="menu_item">sd</div>
                    <div class="menu_item">sd</div>
                    <div class="menu_item">sd</div>
                    <div class="menu_item">sd</div>
                  </div>
                </div>
            </div>

            <div class="row">
                <div id="content">
                LOOK AT THIS (when width of menu_box is constant and when isn't)<br>Try to resize this site
                </div>
            </div>
        </div>
        </body>
        </html>

【问题讨论】：

标签： html positioning css-float

【解决方案1】：

德罗吉·沃伊切丘 :)

我不完全确定您想要实现什么，因为您没有向我们提供任何代码示例，但是我会尝试将 white-space: nowrap; 应用于该区域，因为这应该可以防止事情转入下一行。

编辑：

根据代码示例，如果您始终知道您将拥有多少项目，最简单的解决方案是在绿色框周围添加一个包装器，如下所示：

<div id="menu_item_wrapper">
        <div class="menu_item">sd</div>
        <div class="menu_item">sd</div>
    (....)
</div>

然后将包装器的宽度设置为menu_item_width * number_of_items，在本例中为 800px，因为有 8 个项目，每个项目都是 100px 宽：

#menu_item_wrapper { width: 800px;}

这适用于您的示例代码。不过我建议使用ul 和li 而不是一堆div。

现在，要摆脱水平滚动条，您需要将主体的边距和内边距设置为 0：

body {margin: 0; padding: 0}

那是因为你将 menu_box 的宽度设置为 100%，但你的 body 仍然有 paddings。

希望我明白你的意思。

EDIT2：

我很难理解您的意思，但是如果您不希望在调整窗口大小后出现滚动条并且红色框超出窗口，请像这样将overflow:hidden; 应用于红色框：

#menu_box { width: 100%; height: 50px; background: red; overflow: hidden; }

这是你的意思吗？

【讨论】：

感谢您的回答。我已经尝试过“空白：nowrap;”。我没有给出任何代码，因为它在我相当大的项目中，并且很难剪切所有的 css、div 等。我有 div “header”，里面是“menu_box”，其中包含 div - 菜单选项。该菜单选项跳到下一行。将空白应用于“menu_box”什么都不做，也将其应用于外部“标题”div 导致整个标题没有调整大小（这个“标题”在 div 内，显示：table-row）
如果您可以分享一些代码 sn-ps 以及可能指向该页面的链接，我们将更容易理解整个事物是如何构建的。
我知道尝试使用“float:left”来做到这一点很奇怪，因为我认为 float 旨在执行诸如跳转到下一行之类的操作，但我没有其他想法.
我添加了一个解决方案，希望对您有所帮助。
看看我在底部的评论:)

【解决方案2】：

在调整窗口大小时调整宽度。这是jQuery的方式，

$(window).resize(function(){
   // Change your search box width here relative to window's width
})

这里是css方式，

<div style='width:800px'>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
          </div>

即将其包裹为 div 并固定其宽度。

【讨论】：

这真是丑陋的方式。不使用 JS 也可以完成，所以我宁愿只使用 css/html。
你没有先包含你的代码。编辑了我的答案，看看吧。
同上。是的，它解决了包装项目的问题，但是......“......我不想因为隐藏元素而有水平滚动条，我也希望“内容”能够调整大小，即使我们通过了大小限制保证显示每个菜单项”此解决方案导致滚动条可见，并且标题下的 div 不再调整为较小的大小。滚动条不是什么大问题，但它会停止调整大小。
可能是我没有收到您的问题，但如果没有 javascript，我们无法调整大小。
我很高兴你得到了你的答案 :) 有时我们都认为很愚蠢。