主页 / 问题 / 1525546
Accepted
XlAlbertlX
Asked:2023-06-13 21:01:50 +0000 UTC2023-06-13 21:01:50 +0000 UTC

增加菜单中 li 标签的高度

  • 772

吃

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Roboto, Arial, sans-serif;
}

.logo {
  color: white;
  font-size: 2em;
  font-weight: 700;
}

header a {
  text-decoration: none;
  color: white;
}

header {
  display: flex;
  justify-content: space-between;
  background-color: #ff4800;
  height: 60px;
  align-items: center;
  position: fixed;
  width: 100%;
  padding: 0 0 0 20px;
}

.spisok {
  display: flex;
  align-items: center;
  height: 100%;
  margin-right: 20px;
}

.items {
  font-size: 1.3em;
  display: flex;
  justify-content: space-between;
  list-style: none;
  height: 100%;
}

.spisok ul {
  color: white;
  display: flex;
  align-items: center;
  height: 60px;
}

.items li {
  line-height: 60px;
  padding: 0 20px;
}

.items li:hover {
  background-color: #d23a00;
  transition: .5s;
  color: white;
  cursor: pointer;
}
<header>
  <div class="logo">
    <p><a href="index.html">Broad Smile</a></p>
  </div>
  <div class="spisok">
    <ul class="items">
      <li><a href="#">О нас</a></li>
      <li><a href="#">Покупка доната</a></li>
      <li><a href="#">Серверы</a></li>
      <li><a href="#">Правила</a></li>
      <li><a href="#">Контакты</a></li>
      <li><a href="#">Личный кабинет</a></li>
    </ul>
  </div>
</header>

我想让选项卡在悬停时变暗一点。此选择应为菜单高度的 100%。这是工作代码，但是当我想在 li 标签上（在 .items li{} 选择器中）将行高设置为百分比时，没有任何反应。但是，如果我以像素为单位指定 - 一切都会发生。这怎么能解决？

html

1 个回答

  1. Best Answer

    我想让选项卡在悬停时变暗一点。此选择应为菜单高度的 100%。

    我注释掉了你的一些风格——因为。完全没有影响到什么...

    我添加的 - 我也标记了。

    * {
  margin: 0;
  padding: 0;
}

body {
  font-family: Roboto, Arial, sans-serif;
}

.logo {
  color: white;
  font-size: 2em;
  font-weight: 700;
}

header a {
  text-decoration: none;
  color: white;
}

header {
  display: flex;
  justify-content: space-between;
  background-color: #ff4800;
  height: 60px;
  align-items: center;
  position: fixed;
  width: 100%;
  padding: 0 0 0 20px;
}

.spisok {
  height: 100%;
  margin-right: 20px;
  /*
  display: flex;
  align-items: center;
  */
}

.items {
  font-size: 1.3em;
  list-style: none;
  height: 100%;
  /*
  display: flex;
  justify-content: space-between;
  */
}

.spisok ul {
  color: white;
  display: flex;
  align-items: center;
  height: 60px;
}

.items li {
  padding: 0 20px;
  /* Вот эту часть добавил */
  display: flex;
  align-items: center;
  height: 100%;
}

.items li:hover {
  background-color: #d23a00;
  transition: .5s;
  color: white;
  cursor: pointer;
}
    <header>
  <div class="logo">
    <p><a href="index.html">Broad Smile</a></p>
  </div>
  <div class="spisok">
    <ul class="items">
      <li><a href="#">О нас</a></li>
      <li><a href="#">Покупка доната</a></li>
      <li><a href="#">Серверы</a></li>
      <li><a href="#">Правила</a></li>
      <li><a href="#">Контакты</a></li>
      <li><a href="#">Личный кабинет</a></li>
    </ul>
  </div>
</header>

    • 2

相关问题