html - 如何扩展导航栏背景，同时保持元素居中？

Question

我希望导航栏的蓝色延伸到整个屏幕，而关于、更新和我是谁？留在中间？我希望背景保持为背景，以便在我调整任何大小时它会改变。如果效果更好，我可以使用不同的居中方法。

.centered {
    display: flex;
    justify-content: center;
}
#navbar {
    background: #0099CC;
    color: #FFF;
    height: 51px;
    padding: 0;
    margin: 0;
    border-radius: 0px;
}
*{
    padding:0;
    margin:0;
}
#navbar ul, #navbar li {
    margin: 0 auto;
    padding: 0;
    list-style: none
}
#navbar ul {
    width: 100%;
}
#navbar li {
    float: left;
    display: inline;
    position: relative;
}
#navbar a {
    display: inline-block;
    display:flex;
    line-height: 51px;
    padding: 0 14px;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 16px;
    text-align: center;
}
#navbar li a:hover {
    color: #0099CC;
    background: #F2F2F2;
}

#navbar label {
    display: none;
    line-height: 51px;
    text-align: center;
    position: absolute;
    left: 35px
}

    <div class="centered">
    <nav id='navbar'>
        <ul>
          <li><a href='#'>Home</a></li>
          <li><a href='#'>Updates</a></li>
          <li><a href='#'>Who am I?</a></li>
        </ul>
    </nav>    
    </div>

标签： htmlcss

Answer 1

您可以将 100% 的宽度添加到#navbar 以扩展到整个屏幕并更改 #navbar ul 的显示和宽度属性，如下所示

#navbar {
  width: 100%;
}

#navbar ul {
  display: flex;
  width: fit-content;
}