<分区>
<分区>
重点是让左 ul 与最大宽度对齐左，没有指定宽度的中心 block 始终居中(此 ul 的内容可能会有所不同)，而右 ul 始终在我的顶部导航栏中以 max-width 向右浮动。
主要问题是，当我为 ul 的 flex 属性指定宽度时，它并没有像我预期的那样工作:第三个 ul 必须右对齐，而第二个 ul 应该在一行中占用尽可能多的空间。对齐没问题，但第 3 个 ul 占用太多空间(超过需要的空间)并且视觉上没有向右浮动。如果指定它的宽度来修复第二个 ul 的中心对齐将不起作用。所有元素都有不同的宽度，据我所知 flex 只能处理宽度相等的元素。
但是，我想这是 flex 的正确行为。
HTML
<nav class="nav_wrapper" role="navigation">
<ul class="nav navbar-nav navbar-left">
<li data-item-id="nav-profile-menu">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</li>
</ul>
<ul class="nav navbar-nav navbar-center">
<li data-item-id="nav-profile-menu">
<a class="summary" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="usd">
<span class="summary-item">USD</span>
<span>
<i class="fa fa-arrow-circle-o-down red hidden-sm hidden-xs" aria-hidden="true"></i>
99 <span class="small-text hidden-sm hidden-xs">-0,0474</span>
</span>
</a>
</li>
<li data-item-id="nav-profile-menu">
<a class="summary">
<span class="summary-item">Brent</span>
<span>
<i class="fa fa-arrow-circle-o-down red hidden-sm hidden-xs" aria-hidden="true"></i>
99 <span class="small-text hidden-sm hidden-xs">-0,86%</span>
</span>
</a>
</li>
<li data-item-id="nav-profile-menu" class="hidden-xs">
<a class="summary">
<span class="summary-item">Ni</span>
<span>
<i class="fa fa-arrow-circle-o-up green hidden-sm hidden-xs" aria-hidden="true"></i>
105,00 <span class="small-text hidden-sm hidden-xs">1,29%</span>
</span>
</a>
</li>
<li data-item-id="nav-profile-menu" class="hidden-xs">
<a class="summary">
<span class="summary-item">Al</span>
<span>
<i class="fa fa-arrow-circle-o-up green hidden-sm hidden-xs" aria-hidden="true"></i>
2131,50 <span class="small-text hidden-sm hidden-xs">0,35%</span>
</span>
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-auth">
<li data-item-id="nav-profile-menu">
<a href="/auth" data-toggle="modal" data-target="#login" id="reg-in" class="inline-block"> <span>reg</span> <i class="fa fa-user-plus"></i></a><span></span>
</li>
<li data-item-id="nav-profile-menu" data-toggle="tooltip" title="" data-placement="bottom">
<a href="/auth" data-toggle="modal" id="sign-in" data-target="#login" class="inline-block"> <span>auth</span> <i class="fa fa-sign-in"></i></a>
</li>
</ul></nav>
最佳答案
为什么不使用 flex + absolute 而使用 float？ 漂浮后更干净，无需清除。
.nav_wrapper {
position: relative;
display: flex;
justify-content: center;
}
.navbar-left {
position: absolute;
left: 0;
}
.navbar-auth {
position: absolute;
right: 0;
}
你可以去掉ul
关于html - 左、中、右对齐具有 flex 和不同宽度的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46442131/