如何让水平多行导航菜单项左对齐?
问题描述:
我正在尝试在水平导航菜单中使用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' Handouts and Presentations</a></li>
<li class="vertical-divider"><a href="http://events.stcwdc.org/first-timers-coupon/">First Timer'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' Handouts and Presentations</a></li>
<li class="vertical-divider"><a href="http://events.stcwdc.org/first-timers-coupon/">First Timer'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>
答
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;
}
答
把下面给你的CSS的底部开出左侧边距:
#first-divider:before {
content: "";
margin-left: -28px;
}
并找到下面的链接 - 这也解释了如何您应该使用flexbox使用分隔线。
您在codepen中指出的例子的确是我正在寻找的。但由于某种原因,该代码在我的文件中不起作用。请参阅我的解决方案以获得最佳效果 –