hover не охватывает весь элемент li в nav - PullRequest
Новая
       7

hover не охватывает весь элемент li в nav

0 голосов
/ 20 октября 2018

Я пытаюсь создать состояние наведения для моего элемента 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>

1 Ответ

0 голосов
/ 20 октября 2018
Теги

a по умолчанию являются встроенными элементами, затем задайте стили 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>
...