具有柔性和不同宽度

点左，中和右对齐元件是使左UL与最大宽度左对齐，没有指定的宽度中心块总是居中（该UL可能会发生变化的内容）并且右边的ul总是在我的顶部导航栏中以最大宽度浮动。

主要问题是，当我指定ul的flex属性的宽度不会像我期望的那样工作：3rd ul必须对齐到右边，而2nd应该在一条线上占用尽可能多的空间。对齐方式没问题，但是第3个ul需要太多空间（多于需要），并且视觉上不会右移。如果指定它的宽度来解决这个第二个ul的中心调整不起作用。所有元素都有不同的宽度，就我所知flex只能处理宽度相同的元素。

但是，我想这是一个正确的bahaviour 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&nbsp;<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>&nbsp; 
       <span> 
        <i class="fa fa-arrow-circle-o-down red hidden-sm hidden-xs" aria-hidden="true"></i> 
        99&nbsp;<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>&nbsp; 
       <span> 
        <i class="fa fa-arrow-circle-o-up green hidden-sm hidden-xs" aria-hidden="true"></i> 
        105,00&nbsp;<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>&nbsp; 
       <span> 
        <i class="fa fa-arrow-circle-o-up green hidden-sm hidden-xs" aria-hidden="true"></i> 
        2131,50&nbsp;<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>&nbsp;<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>&nbsp;<i class="fa fa-sign-in"></i></a> 
     </li> 
    </ul></nav>

来源

2017-09-27 Max Box

宽度我不能在这里看不出什么问题：这似乎工作，我会期望。你能否给你的期望增加一些更多的细节，以及什么不按你的期望工作。 – sjahan

也许这是一个负边距问题：'.navbar-nav {margin：7.5px-15px;}'。尝试删除。 – Huelfe

@sjahan 3rd ul的宽度比需要的多得多，并且没有对齐到正确的视觉。 –

你为什么不使用柔性+绝对和u使用浮动？更清洁，无需漂浮后清除。

.nav_wrapper { 
    position: relative; 
    display: flex; 
    justify-content: center; 
} 

.navbar-left { 
    position: absolute; 
    left: 0; 
} 

.navbar-auth { 
    position: absolute; 
    right: 0; 
}

，你可以删除的ul

来源

2017-09-27 08:00:39 ShadowFoOrm

试过这个。右侧ul应该是正确的，但中心ul失去中心对齐。 –

具有柔性和不同宽度

回答

相关问题