为什么 ul 不使用完整导航的高度？

Question

我在创建 header 时遇到了一些问题。 Here，我的 ul 没有使用导航的全高，但是导航使用了 header 的全高。我想修复此问题以使文本垂直居中。谢谢。

（编辑）当我在 ul 上使用 height: 100%; 时，会发生 this。

这是我的 HTML:

 <header>
        <div class="logo">
            <img src="img/logo.png"/>
        </div>
        <nav>
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">WORKS</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>
    </header>

这是我的 SASS:

$BLACK:#000;
$WHITE:#fff;

* {
    box-sizing: border-box;
}

header {
    width: 100%;
    height: 75px;
    background-color: $BLACK;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;

    .logo {
        width: 50%;
        display: flex;
        align-items: center;
        padding-left: 50px;
    }

    nav {
        width: 50%;
        padding-right: 50px;

        ul {
            list-style-type: none;
            display: flex;
            flex-flow: row wrap;
            justify-content: right;

            li {
                display: inline-block;
                margin-left:50px;

                a {
                    text-decoration: none;
                    color: $WHITE;
                }
            }
        }
    }
}

Answer 1

请使用以下代码更新您的 css：

   $BLACK:#000;
$WHITE:#fff;

* {
    box-sizing: border-box;
}

header {
    width: 100%;
    height: 75px;
    background-color: $BLACK;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;

    .logo {
        width: 50%;
        display: flex;
        align-items: center;
        padding-left: 50px;
    }

    nav {
        width: 50%;
        padding-right: 50px;
        height: 100%;
        display: flex;
        align-items: center;
        ul {
            list-style-type: none;
            display: flex;
            flex-flow: row wrap;
            justify-content: right;
            flex: 1 0 auto;
            align-self: stretch;
            align-items: center;
            
            li {
                display: inline-block;
                margin-left:50px;

                a {
                    text-decoration: none;
                    color: $WHITE;
                }
            }
        }
    }
}

Answer 2

可能是因为您没有重置 ul 标签的边距，也没有对其应用 100% 的高度。

$BLACK: #000;
$WHITE: #fff;

* {
  box-sizing: border-box;
  // margin: 0;
  // padding: 0;
}

header {
  width: 100%;
  height: 75px;
  background-color: $BLACK;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;

  .logo {
    width: 50%;
    display: flex;
    align-items: center;
    padding-left: 50px;
  }

  nav {
    width: 50%;
    padding-right: 50px;
    background: red;

    ul {

      list-style-type: none;
      display: flex;
      flex-flow: row wrap;
      justify-content: right;
      background: orange;
      height: 100%;

      li {
        display: inline-block;
        margin-left: 50px;

        a {
          text-decoration: none;
          color: $WHITE;
        }
      }
    }
  }
}

<header>
  <div class="logo">
    <img src="https://via.placeholder.com/20x20.png/09f/fff" />
  </div>
  <nav>
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">WORKS</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>
</header>

Answer 3

这里有一个解决方案。只需将 line-height: 75px; 添加到 li 元素并通过添加 margin: 0px;.

将 ul 元素的边距设置为零

* {
    box-sizing: border-box;
}
header {
    width: 100%;
    height: 75px;
    background-color: #000;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
header .logo {
    width: 50%;
    display: flex;
    align-items: center;
    padding-left: 50px;
}
header nav {
    width: 50%;
    padding-right: 50px;
}
header nav ul {
    list-style-type: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: right;
    margin: 0px;
}
header nav ul li {
    display: inline-block;
    margin-left: 50px;
    line-height: 75px;
}
header nav ul li a {
    text-decoration: none;
    color: #fff;
}

<header>
    <div class="logo">
        <img src="img/logo.png"/>
    </div>
    <nav>
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">WORKS</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </nav>
</header>

但是我在堆栈溢出代码片段运行ner 上将您的 SASS 代码转换为 CSS 到运行。如果需要，您可以再次将其更改为 SASS。

谢谢并致以最诚挚的问候！

为什么 ul 不使用完整导航的高度？

Why isn't ul using full nav's height?

html

css

sass

frontend