Question

我正在创建一个简单的左浮动固定垂直导航栏，它占据视口高度的100％，每个列表项应该采用相同的高度。我已设法完成所有这些但无法使列表项文本根据单个项目的高度在中心垂直对齐。请参阅下面的代码。

html, body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  color: ghostwhite;
  padding: 0;
  margin: 0;
}

header {
  width: 10%;
  background: lightcoral;
}

.main-content {
  width: 90%;
  background: #25b99a;
  box-sizing: border-box;
}

header, .main-content {
  float: left;
  height: 100vh;
}

header nav ul li {
  list-style: none;
}


header nav ul li a {
  text-decoration: none;
}
header nav ul li, header nav ul li a {
  height: 33.33vh;
  display: block;
  color: ghostwhite;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    
    <header>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
    
    
    <div class="main-content">
      <h1>Welcome to my website</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus obcaecati cum rerum vel nesciunt ratione est! At rem totam sed maxime reprehenderit nihil quam mollitia dicta est laborum, possimus vero aspernatur commodi cum quia corporis earum porro, temporibus provident, veritatis.</p>
    </div>
    
    
    
  </div>
</body>
</html>

Answer 1

在导航中添加<span>有点帮助： https://codepen.io/anon/pen/owxLZr

固定导航栏左侧的项目采用相同的高度垂直对齐

1 个答案: