具有柔性和不同寬度

點左，中和右對齊元件是使左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失去中心對齊。 –

具有柔性和不同寬度

回答

相關問題