Question

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

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

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

默认情况下，

display: block;标签是一个内联元素，然后指定样式height: 100%和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>

{{1}}

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

1 个答案: