CSS 溢出问题（带有导航栏）

Question

我目前正在学习 CSS，目前我卡在 "overflow" 上。这是我正在练习的代码。我不明白为什么当我把它设置为overflow: visible时，网页会变成白色？为什么会这样？我已经尝试了所有其他可能的溢出解决方案，例如自动滚动。它们都按我期望的方式工作，但不是可见的情况？谁能向我解释为什么会这样？

在我的 css、

        * {
            color: white;
            margin: 0;
            padding: 0;
        }

        #horizontal_bar {
            background-color: black;
            overflow: hidden; /* When I change it to overflow: visible; the webpage turns white, why is it the case? */
            margin-top: 2em;
        }

        #horizontal_bar ul li{
            list-style-type: none;
            float: left;
            padding-top: 5px;
            padding-bottom: 5px;
        }

        #horizontal_bar ul li img {
            height: 12px;
        }

        #horizontal_bar ul li a {
            text-decoration: none;
            padding: 5px 20px;
            height: 12px;
        }

        a:focus, a:hover {
            background-color: gray;
        }

        #content {
            clear: left;
        }

在我的 HTML、

<body>
    <div id="horizontal_bar">
            <ul>
                <li><a href="" >HTML</a></li>
                <li><a href="" >CSS</a></li>
                <li><a href="" >JAVASCRIPT</a></li>
                <li><a href="" >SQL</a></li>
                <li><a href="" >PHP</a></li>
                <li><a href="" >jQuery</a></li>
                <li><a href="" ><img src="images/search2.png" alt="search"/></a></li>
            </ul>
    </div>
    <div id="content">
        <p>Hello</p>
    </div>
</body>

这是我截取的 2 个屏幕截图。第一个是我设置overflow属性为hidden时的情况，后一个是我设置overflow属性为visible时的情况。

希望能很好地解释为什么溢出 = 可见时会出现这种情况。谢谢。

Answer 1

您需要设置 height 属性和 overflow 以获得预期的输出。

这样试试：Demo

#horizontal_bar {
    background-color: black;
    height:34px;
    overflow: visible;      
    margin-top: 2em;
}

有关 overflow 的更多信息，请参阅 MDN here

Answer 2

Paste this

horizontal_bar {

background-color: black;
float: left;
margin-top: 2em;
overflow: visible;
position: relative;
width: 100%; }

Answer 3

内部 li 有 float:left，这导致外部元素失去其尺寸。外部元素需要指定 float 或 overflow 才能使它们增长并包含内部浮动元素。

不仅 overflow:hidden，其他一些值如 auto 和 overlay 也会使 div 增长。

A div 默认为 overflow:visible。所以它没有任何作用。

此处已有答案 - how-does-css-overflowhidden-work-to-force-an-element-containing-floated-elem

CSS 溢出问题（带有导航栏）

CSS Overflow Issue (with Navigation bar)

css

overflow

html-lists

navigationbar

horizontal_bar {