有些物品的Flexbox导航位于左侧，一些物品位于右侧

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

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

来源

2017-02-13 brainmassage

添加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>

来源

2017-02-13 12:28:50 kukkuz

也，li.left + li.right { 保证金左：汽车; }，并留下了在OP – vals

@vals的HTML，谢谢你的建议:) – kukkuz

有些物品的Flexbox导航位于左侧，一些物品位于右侧

回答

相关问题