1
我正在嘗試構建基本導航,其中一些鏈接位於左側,其中一些位於右側。通過研究這裏的一些答案,我在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;
}
也,li.left + li.right { 保證金左:汽車; },並留下了在OP – vals
@vals的HTML,謝謝你的建議:) – kukkuz