Question

我有以下导航菜单，每当我使用ctrl +右键单击时，最后一项FAQ会出现并消失。更不用说它也会破坏我的整个网站背景，由2张图片代表。什么是错的，如何让它在调整大小时保持不变？干杯！

HTML：

<div class="nav">
        <ul>
           <li class='active '><a href='#'><span>Home</span></a></li>
           <li><a href='#'><span>about us</span></a></li>
           <li><a href='#'><span>our errand ladies</span></a></li>
           <li><a href='#'><span>schedule an errand</span></a></li>
           <li><a href='#'><span>contact us</span></a></li>
           <li><a href='#'><span>faq</span></a></li>
        </ul>
    </div>

的CSS：

.nav {
            width: 100%;
            height: 63px;
            overflow: hidden;
        }

        .nav ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            width: auto;
            position: relative;
            display: block;
            height: 63px;
            text-transform: uppercase;
            font-size: 21px;
            background: transparent url('images/nav-bg-repeat.png') repeat-x top left;
            font-family: Helvetica,Arial,Verdana,sans-serif;
        }
        .nav li {
            display: block;
            float: left;
            margin: 0;
            padding: 0;
            }
        .nav li a {
            display: block;
            float: left;
            text-decoration: none; 
            padding:0 30px;
            height: 63px;
            line-height: 63px;
            vertical-align: middle;
            background: transparent url('images/divider.png') no-repeat top right;
            }
        .nav li a:hover {
            background: transparent url('images/nav-hover.png') repeat-x top right; 
            }

        .nav li a span {
            color: #000;
            font-weight: bold;
        }

Answer 1

您在overflow: hidden;元素上设置.nav，未定义宽度。

默认情况下，.nav设置为100％宽度，因为它是一个块元素。它将自动跨越当前所在父级的宽度。

当您将窗口调整为不适合链接的大小时，它们会落在.nav之外并且从视图中隐藏。

您可以为.nav（或父容器）设置固定宽度，以防止它在宽度上折叠。

.nav {
  width: 960px;
}

或者，如果您仍希望折叠，但仍然显示导航链接，则可以删除overflow: hidden;并显示元素（但是，它们不会相互内联。

Answer 2

第二个问题设置

body{
background-repeat:no-repeat;
}

它会随着溢出被隐藏而消失;将其设置为无

.nav{
width:1000px;
overflow:none;
..
}

我看到的方式是你试图将列表元素内联，这样你就可以尝试这段代码并修改外观：

<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">Here</a></li>
<li><a href="#">There</a></li>
<li><a href="#">Faq</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>


#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

导航菜单最后一项出现并在调整大小时消失

2 个答案: