如何讓水平多行導航菜單項左對齊？

Question

我正在嘗試在水平導航菜單中使用flexbox以使用管道分隔符均勻分佈菜單項。

我可以將項目換到下一行，但頂行的第一項縮進，所以下一行的第一項開始在頁邊的更遠處。

如何讓菜單從左邊距開始？

我有兩個菜單，在第一個菜單中，管道間距不均勻。在第二個菜單中，管道間隔均勻。這是我得到的。兩個導航菜單，包裝不均勻的

例子：

我如何拿到包裹的第一個項目下方對齊頂行與均勻間隔的管道？謝謝。

這是我試過的。

ul.container { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    flex-flow: row wrap; 
 
} 
 

 
ul.container li { 
 
    list-style: none; 
 
    list-style-position: inside; 
 
    display: inline; 
 
    text-align: left; 
 
    margin: 0 0 0 -1em; 
 
    padding: 0.7em 0 0 0; 
 
    white-space: normal; 
 
} 
 

 
ul.container li.vertical-divider:before { 
 
    font-weight: normal; 
 
    content: " | "; 
 
    padding-right: 0.2em; 
 
    background-color: transparent; 
 
}

<div id="inthissection"> 
 
    <p class="inthissection">In This Section:</p> 
 
    <ul class="container"> 
 
    <li class="vertical-divider"><a href="http://events.stcwdc.org/about-wdcb-events/">About WDCB Events</a></li> 
 
    <li class="vertical-divider"><a href="http://events.stcwdc.org/events">Events Calendar</a></li> 
 
    <li class="vertical-divider"><a href="http://events.stcwdc.org/speakers-handouts-and-presentations/">Speakers&#39; Handouts and Presentations</a></li> 
 
    <li class="vertical-divider"><a href="http://events.stcwdc.org/first-timers-coupon/">First Timer&#39;s Coupon</a></li> 
 
    <li class="vertical-divider"><a href="http://events.stcwdc.org/submit-event-form/">Submit an Event</a></li> 
 
    <li class="vertical-divider"><a href="http://events.stcwdc.org/submit-an-article/">Submit an Article</a></li> 
 
    <li class="vertical-divider"><a href="http://events.stcwdc.org/submit-event-form/">Event Announcement Form</a></li> 
 
    <li class="vertical-divider"><a href="http://www.stcwdc.org/events_past_archives.shtml">Archives of Past Events</a></li> 
 
    </ul> 
 
</div>

更新： 使用從@Abinthaha的建議，我想出了一個解決方案緊密;但是，它仍然不是垂直左對齊，因爲它在codepen示例中。我仍然想要解決這個問題。這裏是正在爲我工​​作：

/* ----Flexible Horizontal NAVIGATION LISTS */ 
ul.container { 
    list-style: none; 
    padding: 0; 
    max-width: 400px; 
    display: flex; 
    flex-flow: row wrap; 
} 

ul.container li.vertical-divider:first-child:before { 
    content: none; 
    margin: 0 0 0 -0.7em; 
    padding: 0; 
    flex-grow: 1 
} 

li.vertical-divider:not(:last-child) { 
    font-weight: normal; 
    content: " | "; 
    margin: auto; 
} 

ul.container li.vertical-divider:last-child { 
    flex: 0; 
} 

/* In this section --------------------------------- */ 
#inthissection { 
    background-color: transparent; 
    margin: -1em 0 0 0; 
    padding: 0 0 0.9em 0; 
    font-weight: bold; 
    width: auto; 
} 

p.inthissection { 
    margin: 0.9em 0 0 0; 
    padding: 0.9em 0 0 0; 
    font-size: 0.9em; 
    font-weight: bold; 
} 

#inthissection ul { 
    display: inline; 
    list-style-type: none; 
    font-size: 0.9em; 
    margin: 0; 
    padding: 0; 
} 

#inthissection li { 
    display: inline; 
    margin: -0.4em auto -1.2em -0.5em; 
    padding: 0.7em 0.8em 0.4em 0.8em; 
} 

#inthissection ul li:first-child:before { 
    content: none; 
    margin-left: -28px; 
    padding: 0; 
} 

#inthissection li:before { 
    font-weight: normal; 
    content: " | "; 
    background-color: transparent; 
    margin: 0 0 0 -0.7em; 
    padding: 0.7em 0.8em 0.4em 0.8em; 
} 



<div id="inthissection"> 
    <p class="inthissection">In This Section:</p> 
    <ul class="container"> 
    <li class="vertical-divider"><a href="http://events.stcwdc.org/about-wdcb-events/">About WDCB Events</a></li> 
    <li class="vertical-divider"><a href="http://events.stcwdc.org/events">Events Calendar</a></li> 
    <li class="vertical-divider"><a href="http://events.stcwdc.org/speakers-handouts-and-presentations/">Speakers&#39; Handouts and Presentations</a></li> 
    <li class="vertical-divider"><a href="http://events.stcwdc.org/first-timers-coupon/">First Timer&#39;s Coupon</a></li> 
    <li class="vertical-divider"><a href="http://events.stcwdc.org/submit-event-form/">Submit an Event</a></li> 
    <li class="vertical-divider"><a href="http://events.stcwdc.org/submit-an-article/">Submit an Article</a></li> 
    <li class="vertical-divider"><a href="http://events.stcwdc.org/submit-event-form/">Event Announcement Form</a></li> 
    <li class="vertical-divider"><a href="http://www.stcwdc.org/events_past_archives.shtml">Archives of Past Events</a></li> 
    </ul> 
</div> 

Answer 1

Flexbox是一種簡單的技術。我認爲這是你正在尋找的。 codepen。覈實。元素左對齊，左側任何行都沒有空白。如果你想平均對齊項目。然後你可以使用flex-grow: 1到li。因此，每行中的li將佔用該行的整個空間並將在其間平均分配。

ul { 
    display: flex; 
    flex-wrap: wrap; 
} 

li { 
    padding: 2px 15px; 
} 

li:not(:last-child) { 
    border-right: 1px solid #000; 
} 

Answer 2

把下面給你的CSS的底部開出左側邊距：

#first-divider:before { 
    content: ""; 
    margin-left: -28px; 
} 

並找到下面的鏈接 - 這也解釋瞭如何您應該使用flexbox使用分隔線。

https://stackoverflow.com/a/41632218/7032438