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

发布于 12-29 15:31 字数 3412 浏览 4 评论 0原文

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

我尝试过 inline-block、position:absolute、overflow:hidden ,但没有任何效果符合我的要求。

示例(我希望这个绿色框保留在第一行,并且由于隐藏元素,我不想有水平滚动条,而且我希望“内容”能够调整大小,即使我们通过了保证显示每个菜单的大小限制item ):

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

I have a problem as i've described in title.
I've got menu and I use inside it float:left for divs. Menu box contains search box and when i resize page i don't want search box to jump to next line when width of site is too little, i want to be "cut/hidden" this part of search box.

I've tried with inline-block, position:absolute, overflow:hidden and nothing works as i want to.

Sample (i want this green boxes to stay in first line and i don't want to have horizontal scroll bar because of hidden elements, also i want "content" to be able to resize even we pass size limit which guarantees to show every menu item ):

        <!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, now you should understand what I mean, in this case it doesn't work properly, overflow:hidden do nothing (it was first thing which i've tried). Look at content. To avoid questions: yes, i need to use css tables.

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

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

发布评论

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

评论(2

落花浅忆2025-01-05 15:31:36

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。

现在,要摆脱水平滚动条,您需要将正文的边距和填充设置为 0:

body {margin: 0; padding: 0}

这是因为您已将 menu_box 的宽度设置为 100%,但正文仍然有填充。

我希望我明白你的意思。

EDIT2:

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

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

这是你的意思吗?

Drogi Wojciechu :)

I'm not entirely sure what are you trying to achieve as you have provided us with no code samples, however I would try applying white-space: nowrap; to that area as this should prevent things from wrapping to the next line.

EDIT:

Based on the code sample, the easiest solution, provided that you always know how many items you will have, would be adding a wrapper around the green boxes, like so:

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

and then setting the width of the wrapper to menu_item_width * number_of_items, in this case 800px as there are 8 items and each item is 100px wide:

#menu_item_wrapper { width: 800px;}

This works when applied to your sample code. I would however suggest using ul and li instead of a bunch of divs.

Now, to get rid of the horizontal scroolbar you need to set the margin and padding of the body to 0:

body {margin: 0; padding: 0}

That's because you have set the width of you menu_box to 100%, but your body still has paddings.

I hope I understand what you mean.

EDIT2:

I'm having a hard time understanding what you mean, but if you don't want a scrollbar to appear after you resize the window and the red boxes go beyond the window, apply overflow:hidden; to the red box like so:

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

Is this what you mean?

Bonjour°[大白2025-01-05 15:31:36

调整窗口大小时调整宽度。
这是 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 并固定其宽度。

Resize width on resize of window.
Here's the jQuery way,

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

Here the css way,

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

i.e. wrap it it a div and fix its width.

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