改行なしのナビゲーションバーと、左側の固定メニューと右側の固定メニュー

Question

ナビゲーションバー内のブレッドクラムのサイズを自動的に変更するソリューションを見つけるには、CSSとjを使用しないでください。

ナビゲーションバーの幅は100％にする必要があります。 右側には常にユーザーメニューが表示されます。 左側には、ブレッドクラムナビゲーションがあります。要素内の要素のサイズを変更する必要がありますusing text-overflow: ellipsis

これまでさまざまなことを試みました。私はスペースを使い果たすたびに、ユーザーメニューを右に浮かべることができません。ただし、ナビゲーションバーは1行にする必要があります。

次に、ナビゲーションバーを1行にして、ユーザーメニューとブレッドクラムがそれぞれ1つのテーブルセルであるように、テーブルレイアウトを利用しようとしました。ただし、ブレッドクラムを短くするのではなく、十分なスペースがない場合は、画面の右側にユーザ​​ーメニューがプッシュされます。

十分なスペースがある場合には、右

------------------------------------------------------------------------ 
| bread 1 > bread 2          user logout | 
------------------------------------------------------------------------ 

に左とユーザメニューへのブレッドクラムスティックを足りない場合：ここ

は、ナビゲーションバーがどのように振る舞うべきかでありますスペースの場合、ユーザーメニューはフルサイズで右に留まる必要があります。ブレッドクラムは短くなるはずですが。

------------------------------------------------------------------------ 
| very very long br.... > very very long br.... > very.. user logout | 
------------------------------------------------------------------------ 

これは基本的なマークアップです：

<nav> 
    <ol> 
    <li><div>one &gt;</div></li> 
    <li><div>two is longer than one &gt;</div></li> 
    <li><div>three is longer than two</div></li> 
    </ol> 
    <div class="user"> 
    <div>dont</div> 
    <div>resize</div> 
    </div> 
</nav> 

、ここでは、対応するフィドルです：https://jsfiddle.net/eex8yrLt/

Answer 1

私のすべての要件を満たすための唯一の方法であるように思われました。

自体がその後ブレッドクラム・コンテナは、それが均等であり、Aの各項目を縮小するように別のフレキシボックスである必要があるフレキシボックス

.nav { 
    display: flex; 
    width: 100%; 
} 

する必要があるナビゲーションバーの最初

<div class="nav"> 
    <div class="bread"> 
     <span> 
      1 breadcrumb 
     </span> 
     <span> 
      2 very long breadcrumb 
     </span> 
     <span> 
      3 very long breadcrumb 
     </span> 

    </div> 
    <div class="user"> 
     <span> 
      hello 
     </span> 
     <span> 
      user 
     </span> 
    </div> 
</div> 

マークアップを与え空白のために手を加えて、すべてが1行に収まるようにします。

.bread { 
    display: flex; 
    white-space: nowrap; 
} 

ブレッドクラムの各項目は、省略記号

.bread span { 
    text-overflow: ellipsis; 
    overflow: hidden; 
} 

と全く最後に、ユーザメニューがフレックスべきではありませんを使用してオーバーフローするので、それが右側に固執しますmargin-left: autoを取得します。

.user { 
    flex: none; 
    white-space: nowrap; 
    margin-left: auto; 
} 

フィドルはここにある：https://jsfiddle.net/7oyu34gg/1/

Answer 2

ここ<オール>がためのソリューションである前に、あなたがdiv.userを移動することができた場合君は。これは、リストアイテムを作ることに基づいています：display：inline;フレキシボックスを使用して

nav { 
 
    width: 70%; 
 
} 
 
nav * { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 
nav ol { 
 
    margin: 0; 
 
    padding: 0; 
 
    text-overflow: ellipsis; 
 
} 
 
nav li { 
 
    list-style: none; 
 
    display: inline; 
 
} 
 
.user { 
 
    float: right; 
 
    background: lightcoral; 
 
} 
 
.name, .acct-no { 
 
    margin-left: 1em; 
 
}

<nav> 
 
    <div class="user"> 
 
    <span class="name">John Doe</span> 
 
    <span class="acct-no">1267902</span> 
 
    </div> 
 
    <ol> 
 
    <li>one &gt;</li> 
 
    <li>two is longer than one &gt;</li> 
 
    <li>three is longer than two</li> 
 
    </ol> 
 
</nav>