HTML 导航栏样式

Question

我想给我的菜单点上色： like this

但只有文本的背景是彩色的。如何更改我的代码以填充整个菜单以匹配上图中的颜色？

    nav{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        align-items: center;
        min-height: 8vh;
        background-color: #F39C12 ;
        width: 100%;
    }
    .nav_links{
        display: flex;
        justify-content: space-around;
        width: 35%;
        list-style: none;
        margin: 0px;
        padding: 0px;
    }
    .nav_links li{
        background-color: #DAF7A6;
    }
    .nav_links a{
        text-decoration: none;
        letter-spacing: 2px;
        color: whitesmoke;
    }

    <!-- navigation bar -->
        <nav>
            <ul class="nav_links">
                <li>
                    <a href="#">Kezdőlap</a>
                </li>
                <li>
                    <a href="#">Képek</a>
                </li>
                <li>
                    <a href="#">Videók</a>
                </li>
                <li>
                    <a href="#">Játék</a>
                </li>
            </ul>
        </nav>

祝你有愉快的一天！谢谢！

Answer 1

您必须添加边框样式才能获得附加图像。

border: 1px solid ;

您可以用任何您想要的颜色代替纯色来设计彩色边框

Answer 2

您必须向 li 标签添加填充。

nav {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: #F39C12;
  width: 100%;
}

.nav_links {
  display: flex;
  justify-content: space-around;
  width: 35%;
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.nav_links li {
  background-color: #DAF7A6;
  /* EDITED HERE */
  padding: 20px;
}

.nav_links a {
  text-decoration: none;
  letter-spacing: 2px;
  color: whitesmoke;
}

<!-- navigation bar -->
<nav>
  <ul class="nav_links">
    <li>
      <a href="#">Kezdőlap</a>
    </li>
    <li>
      <a href="#">Képek</a>
    </li>
    <li>
      <a href="#">Videók</a>
    </li>
    <li>
      <a href="#">Játék</a>
    </li>
  </ul>
</nav>

HTML 导航栏样式

HTML Navigation bar styling

html

css

navigationbar