Question

如何对齐第一页和第二页的导航项，使它们显示在左侧而不是右侧？我可以将资源中心移到末尾，但是我只需要将两个导航项移到左侧，而flexbox选项似乎不允许我这样做？请帮忙，谢谢。

#box1 {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
}

#list1 {
  display: flex;
  align-content: space-between;
}

.list2 {
  list-style-type: none;
}

main {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
}

<div id="list1">
  <nav>
    <ul class="list2">
      <li>Page One</li>
      <li><a href="page2.html">Page Two</a></li>
    </ul>

  </nav>
</div>

Answer 1

如果打算让nav锚点彼此左对齐，那么如果您想在导航上屈曲，则只需添加flex-inline li元素：

.list2 { 
  list-style-type: none;
  display: inline-flex;
}

.list2 li {
  margin-right: 5px;
}

<div id="list1">
  <nav >
    <ul class="list2">
    <li>Page One</li>
    <li><a href="page2.html">Page Two</a></li>
  </ul>
  </nav>
</div>

或者您也可以在inline-block元素上使用<li>，如以下代码片段：

.list2 li {
  display:  inline-block;
}

<div id="list1">
  <nav >
    <ul class="list2">
    <li>Page One</li>
    <li><a href="page2.html">Page Two</a></li>
  </ul>
  </nav>
</div>

将<nav>内容对齐到flexbox行的左侧而不是右侧？

1 个答案: