如何正确对齐CSS项目？

Question

我在我为学校项目创建的网站上找到了一个我非常喜欢的网站布局，它看起来像这样：

我不知道如何添加他们在导航下的那条白线。我将如何添加该行？

这是我的代码：

body,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0px;
  margin: 0px;
}

body {
  background-color: black;
}

.container {
  background-color: #CC0000;
  margin-top: 25px;
}

.header {
  font-family: 'Exo 2', sans-serif;
  color: white;
  font-weight: 700;
  font-size: 20px;
  margin-top: 20px;
}

.header h1 {
  margin-left: 25px;
}

.headerNav {
  display: flex;
}

nav {
  font-family: 'Exo 2', sans-serif;
  margin-left: 1000px;
}

nav ul.mynav li {
  float: left;
  list-style-type: none;
  margin-top: 75px;
}

nav ul.mynav li a {
  display: block;
  margin: 0px 20px;
  color: white;
  text-decoration: none;
  font-size: 18px;
}

nav ul.mynav li.active a {
  color: black;
  font-weight: bold;
}

nav ul.mynav li a:hover {
  color: black;
}

.keepopen {
  clear: both;
}

<div class='headerNav'>
  <header class='header'>
    <h1>Ute</h1>
    <h1>Football</h1>
    <h1>Faithful</h1>
  </header>
  <nav>
    <ul class='mynav'>
      <li class="active"><a href="index.html">About</a></li>
      <li><a href="schedule.html">Schedule</a></li>
      <li><a href="news.html">News</a></li>
    </ul>
    <div class='keepopen'></div>
  </nav>
</div>

我希望导航尽可能靠近上面的照片。我将如何正确实施呢？

Answer 1

您可以使flexbox人工化，并使用辩解内容，align-items或margin来重置对齐方式。具有或不具有框阴影的边框样式都可以用来伪造hr视觉

一个可能的例子：

body,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0px;
  margin: 0px;
}

body {
  background-color:rgb(188, 2, 0);
}

.container {
  background-color:rgb(188, 2, 0);
  margin-top: 25px;
}

.header {
  font-family: 'Exo 2', sans-serif;
  color: white;
  font-weight: 700;
  font-size: 20px;
  margin-top: 20px;
}

.header h1 {
  margin-left: 25px;
}

.headerNav {
  display: flex;
  align-items: center;
}

nav {
  font-family: 'Exo 2', sans-serif;
  display: flex;
  flex: 1;
  margin: auto 1em;
  border-bottom: groove rgb(224, 129, 127)
}

nav ul.mynav li {
  float: left;
  list-style-type: none;
}

ul {
  margin-left: auto;
}

nav ul.mynav li a {
  display: block;
  margin: 0px 20px;
  color: white;
  text-decoration: none;
  font-size: 18px;
}

nav ul.mynav li.active a {
  color: black;
  font-weight: bold;
}

nav ul.mynav li a:hover {
  color: black;
}

.keepopen {
  clear: both;
}

<div class='headerNav'>
  <header class='header'>
    <h1>Ute</h1>
    <h1>Football</h1>
    <h1>Faithful</h1>
  </header>
  <nav>
    <ul class='mynav'>
      <li class="active"><a href="index.html">About</a></li>
      <li><a href="schedule.html">Schedule</a></li>
      <li><a href="news.html">News</a></li>
    </ul>
    <div class='keepopen'></div>
  </nav>
</div>

有关弹性规则的提醒：https://css-tricks.com/snippets/css/a-guide-to-flexbox/