html - 为什么 flexbox 项目没有看起来居中并且边框底部没有覆盖整个空间？

问题描述

我是网络开发的初学者，所以如果我的问题看起来很愚蠢，请原谅。

在了解了这个flexbox概念之后，我尝试应用这个概念来开发一个简单的标题。一切都很完美，但即使在使用align-items:center财产之后，这些物品看起来也不是完全居中。
然后我尝试使用nav-main类的边框底部来给出下划线，但我不明白为什么下划线没有覆盖整个空间。

* {
  font-family: Arial, Helvetica, sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
}

.mainContainer {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  background-color: lemonchiffon;
  align-items: center;
}

.heading {
  order: 2;
}

.nav-main {
  border-bottom: 1px solid red;
  order: 1;
}

.nav-main li {
  display: inline;
  margin: 5px;
}

<div class="mainContainer">
  <h1 class="heading">The Peace</h1>
  <nav class="nav-main">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </nav>
</div>

编辑我的第一个问题由以下代码解决，但下划线问题仍然保持不变。

.nav-main ul{
padding-left: 0;
}

标签： htmlcssflexbox

将 .nav-main ul 填充设置为 0：

* {
font-family: Arial, Helvetica, sans-serif;
}

html,
body {
margin: 0;
padding: 0;
}

.mainContainer {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
background-color: lemonchiffon;
align-items: center;
}

.heading {
order: 2;
}

.nav-main {
border-bottom: 1px solid red;
order: 1;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.nav-main ul {
  padding: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-main li {
display: inline;
margin: 5px;
}

<body>
  <div class="mainContainer">
    <h1 class="heading">The Peace</h1>
    <nav class="nav-main">
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </nav>
  </div>
</body>

html - 为什么 flexbox 项目没有看起来居中并且边框底部没有覆盖整个空间？

问题描述

解决方案

推荐阅读