为什么 justify-content: flex-start;不工作？

Question

我正在使用 flexbox 制作导航栏。默认情况下，不应该将 justify-content 属性设置为 flex-start；？但是我容器中的内容并不是从一开始就开始的。这是 output 和代码：

html,
body {
  background-color: #ffeead;
  margin: 10px;
}

ul {
  list-style-type: none;
}

.container {
  border: 5px solid #dff124;
  display: flex;
  justify-content: flex-start;
}

.container li {
  padding: 10px;
  text-align: center;
  font-size: 2em;
  color: #ffeead;
  background-color: #96ceb4;
}

.search {
  flex: 1;
}

<nav>
  <ul class="container">
    <li>Home</li>
    <li>Profile</li>
    <li class="search">
      <input type="text" class="search-input" placeholder="Search">
    </li>
    <li>Logout</li>
  </ul>
</nav>

Answer 1

那个white-space是<ul>的默认padding造成的。您可以通过添加以下内容来删除它：ul { padding-left: 0; }

html,
body {
  background-color: #ffeead;
  margin: 10px;
}

ul {
  list-style-type: none;
  padding-left: 0;
}

.container {
  border: 5px solid #dff124;
  display: flex;
  justify-content: flex-start;
}

.container li {
  padding: 10px;
  text-align: center;
  font-size: 2em;
  color: #ffeead;
  background-color: #96ceb4;
}

.search {
  flex: 1;
}

<nav>
  <ul class="container">
    <li>Home</li>
    <li>Profile</li>
    <li class="search">
      <input type="text" class="search-input" placeholder="Search">
    </li>
    <li>Logout</li>
  </ul>
</nav>

为什么 justify-content: flex-start;不工作？

Why is justify-content: flex-start; not working?

html

css

flexbox

responsive-design