Question

我看了另一个答案，但没有多大帮助。我对HTML很陌生，所以我想知道我是否能得到一些帮助。正如你在我的http://toucanandbutterfly.uk/上看到的那样，如果你调整窗口的大小，在某个点上，结束按钮会跳出一行，这是我真的不想要的。有什么帮助吗？

<nav><ul>
            <li class="active"><a href="home.html">Home Page</a></li>
            <li><a href="PhotoLibrary.html">Photo Library</a></li>
            <li><a href="Policies.html">Policies</a></li>
            <li><a href="Information.html">Information</a></li>
            <li><a href="WhereToFindUs.html">Where to Find us</a></li>
            <li><a href="ContactUs.html">Contact Us</a></li>
            <li><a href="Blog.html">Blog</a></li>
        </ul></nav>

是HTML，CSS是：

.mainHeader nav {
        background: #97e41b;
        font-size: 1.143em;
        height: 160px;
        line-height: 30px;
        margin-bottom: 0;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

.mainHeader nav ul {
    list-style: none; 
    margin: 0 auto;
    padding-left: 0;
}

.mainHeader nav li {
    margin-left: 0 auto;
    width: 100%;
}

.mainHeader nav a:link, .mainHeader nav a:visited {
    color: #FFF;
    display: block;
    height: 30px;
    padding: 5px 0;
    text-decoration: none;
}

.mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
    background: #CF5C3F;
    color: #fff;
    text-shadow: none !important;
}

.mainHeader nav li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

对不起，我不知道我需要哪一件。

Answer 1

您可能想要修复宽度，或者将nav对象转换为块元素并使用溢出。

<nav>
  <a class="active" href="home.html">Home Page</a>
  <a href="PhotoLibrary.html">Photo Library</a>
  <a href="Policies.html">Policies</a>
  <a href="Information.html">Information</a>
  <a href="WhereToFindUs.html">Where to Find us</a>
  <a href="ContactUs.html">Contact Us</a>
  <a href="Blog.html">Blog</a>
</nav>

和

body, #mainHeader {        min-width:        1000px }
nav {                      display:          block;
                           overflow:         visible;
                           text-align:       center;
                           word-spacing:     22px }
#mainHeader nav a.active { background-color: lime }

此外，您的代码中存在很多重大错误，因此除了您明显的问题之外，我建议您多次通过validator.nu将其拉出来。

如何阻止导航栏创建额外的行？

1 个答案: