Question

我正在尝试构建一个基本导航，其中一些链接位于左侧，其中一些链接位于右侧。通过研究这里的一些答案，我在jsfiddle中找到了以下解决方案。但是他们之间有很多空间。我只想要最左边和最右边的项目之间的空间很小，中心应该有很大的差距。

HTML：

<ul class="main-nav">
    <li class="left"><a class="links-main" href="#">Left1</a></li>
    <li class="left"><a class="links-main" href="#">Left2</a></li>
    <li class="left"><a class="links-main" href="#">Left3</a></li>

    <li class="right"><a class="links-main" href="#">Right1</a></li>
    <li class="right"><a class="links-main" href="#">Right2</a></li>
    <li class="right"><a class="links-main" href="#">Right3</a></li>
    <li class="right"><a class="links-main" href="#">Right4</a></li>

</ul>

CSS：

ul.main-nav {
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: flex-start;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li.left 
{
    margin-right: auto;
}

li.right 
{
    margin-left: auto;
}

.links-main {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

JsFiddle

Answer 1

将margin-left: auto添加到第一个right元素 - 请参阅下面的演示：

ul.main-nav {
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: flex-start;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

/*
li.left
{
    margin-right: auto;
}

li.right
{
    margin-left: auto;
}
*/
li.left + li.right {
  margin-left: auto;  
}

.links-main {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

<ul class="main-nav">
    <li class="left"><a class="links-main" href="#">Left1</a></li>
    <li class="left"><a class="links-main" href="#">Left2</a></li>
    <li class="left"><a class="links-main" href="#">Left3</a></li>
    
    <li class="right"><a class="links-main" href="#">Right1</a></li>
    <li class="right"><a class="links-main" href="#">Right2</a></li>
    <li class="right"><a class="links-main" href="#">Right3</a></li>
    <li class="right"><a class="links-main" href="#">Right4</a></li>

</ul>

带有一些项目的Flexbox导航在左侧，一些项目在右侧

1 个答案: