html - 如何正确对齐元素的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

您可以使用 flexboxes 并使用 justify-content、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>

关于 flex 规则的提醒:https://css-tricks.com/snippets/css/a-guide-to-flexbox/