Question

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

我尝试使用内联块，位置：绝对，溢出：隐藏，没有任何效果，因为我想要。

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

        <!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>

Answer 1

Drogi Wojciechu：）

我不完全确定你想要实现什么，因为你没有向我们提供任何代码示例，但是我会尝试将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。

现在，要摆脱水平的scroolbar，你需要将身体的边距和填充设置为0：

body {margin: 0; padding: 0}

那是因为你已经将menu_box的宽度设置为100％，但你的身体仍然有填充。

我希望我理解你的意思。

EDIT2：

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

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

这是你的意思吗？

Answer 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并固定其宽度。

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

2 个答案: