Question

所以我有一个包含元素，其宽度随着屏幕变小#Aa而变小，此元素有一个<nav>元素，其中包含<ul>元素和一些<li>元素元素作为菜单项。

当#Aa无法再包含所有<li>元素时，页面布局就会中断。

我希望发生的是

时会发生的事情使用

overflow:hidden。我将此规则应用于#Aa。

我认为这是overflow:hidden的目的。我是通过网络检查员手动输入的。

以下是相关CSS的部分

nav {
    white-space: nowrap;
    float: right;
}
nav ul li a {
    display: inline-block;
    padding: 0 20px;
    line-height: 60px;
    color: #2e2c60;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .1em;
}
nav ul li {
    display: inline-block;
    float: left;
    border-left: 1px solid #ffffff;
    position: relative;
    list-style: none;
    background: rgba(255, 255, 255, .25);
}
nav ul li:hover{
  background: rgba(255, 255, 255, 0.5);
}
nav ul li:last-child{
    border-right: 1px solid #ffffff;
}

Answer 1

element {
    display: none;
}

尝试从#left-column元素的内联样式中删除它：

<section style="display:none;" id="left-column">

Answer 2

好吧，你必须根据媒体查询的分辨率为“nav”设置代码。

Answer 3

简而言之： 您需要定义height或max-height（更适合此示例）才能使溢出工作，否则它只会扩展，因为是预期的行为

溢出：隐藏似乎什么都不做？

3 个答案: