悬停没有覆盖导航中的整个 li 元素

Question

我正在尝试为导航栏中的 a 元素创建悬停状态，问题是悬停颜色想要覆盖 nav 的整个高度。

我尝试在 a 元素上使用 padding 来解决这个问题，但它看起来不像是正确的方法，因为我一直在更改值直到找到正确的值。

body,
html {
  margin: 0;
  padding: 0;
}

nav {
  background: black;
}
.container {
  padding: 0px;
  margin: 0px;
  list-style: none;
  color: white;
  font-weight: bold;
  font-size: 1.8rem;
  text-transform: capitalize;

  display: flex;
}
.search {
  flex: 1;
}
.search .search-input {
  width: 100%;
  font-size: 1.8rem;
  text-transform: capitalize;
}
.container a {
    text-decoration: none;
    color: white;
    padding: 0 10px 6px 10px; /*this what I use to fix it */
}
.container a:hover {
    text-decoration: none;
    color: white;
    background: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="./css/style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <nav>
        <ul class="container">
            <li><a href="#">home</a></li>
            <li><a href="#">profile</a></li>
            <li class="search">
                <input type="text" class="search-input" placeholder="search">
            </li>
            <li><a href="#">logout</a></li>
        </ul>
    </nav>
</body>

</html>

Answer 1

a 标签默认是一个内联元素，然后给样式 display: block; 和 height: 100% 来占据它们父元素的完整 space。片段：

body,
html {
  margin: 0;
  padding: 0;
}

nav {
  background: black;
}
.container {
  padding: 0px;
  margin: 0px;
  list-style: none;
  color: white;
  font-weight: bold;
  font-size: 1.8rem;
  text-transform: capitalize;

  display: flex;
}
.search {
  flex: 1;
}
.search .search-input {
  width: 100%;
  font-size: 1.8rem;
  text-transform: capitalize;
}
.container a {
    text-decoration: none;
    color: white;
    display: block;
    height: 100%;
}
.container a:hover {
    text-decoration: none;
    color: white;
    background: red;
}

<nav>
  <ul class="container">
    <li><a href="#">home</a></li>
    <li><a href="#">profile</a></li>
    <li class="search">
      <input type="text" class="search-input" placeholder="search">
    </li>
    <li><a href="#">logout</a></li>
  </ul>
</nav>

悬停没有覆盖导航中的整个 li 元素

the hover doesn't cover the whole li element in the nav

html

css

hover

nav