Question

我的目的：是让导航栏穿过整个屏幕，带有灰色（＃839496）。并让每个链接/按钮在其左侧和右侧有一个边框。就像上面的导航栏一样：

http://www.theberrics.com/dailyops

然而，

我的问题是：链接/按钮只是到达目的地。我希望每个按钮的宽度为150px（工作正常）。但是灰色条也会在整个屏幕上水平延续（这不起作用，只显示任何内容）。

这是我的css：

nav {
    background-color: #839496;
    padding: 0.02px 0;
    margin-bottom: 10px;
}

nav ul {
    width: 100%; /*RIGHT HERE: i would like the whole unordered list to go across the screen. But it doesnt work*/
    position: relative;
    left:10%;
    margin: 0;
    padding-left: 100px;
}

nav li {
    float: left;

}

nav li a{
    display: block;
    width: 150px;
    background-color: #839496;
    color: #fff;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    padding: 5px;
    border-right: 1px solid;
    border-left: 1px solid;
}

nav a:hover {
    background-color: white;
    color: #000;
    text-decoration: underline;
}

这是我的HTML：

    <nav>
        <ul>
            <li><a href="index.html">Home</a><li>
            <li><a href="Top10.html">Top 10</a></li>
            <li><a href="Skaters.html">Skaters</a></li>
            <li><a href="Submit.html">Submit</a></li>
        </ul>   
    </nav>

另外：我不希望每个按钮都是页面的25％。只有150像素宽。

很抱歉，如果我的代码或我说的任何内容令人困惑。谢谢你的阅读！

Answer 1

更新您的css，如下所示（即包括overflow: hidden;到nav

<强> CSS

nav {
    background-color: #839496;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 0.02px 0;
}

如何使导航跨越整个页面

1 个答案: