ナビゲーションバー画面のサイズ/縮尺/比率に応じて壊れます

Question

基本的に私はある幅にしかなりたくないナビゲーションバーを持っています。それは4つの要素を持ち、これらの要素の幅に正確にしたい。ここに私の仕事用コンピュータのように見えます。

これは、私はそれが見えるようにしたい正確に何です。ナビゲーションバーは最後の要素の最後で完全に終了し、中央に配置されます。私自身がこれを達成できる唯一の方法は、338pxの固定幅に設定することです。私の問題は、自分のコンピュータ以外のデバイス（例えば、私の電話、ラップトップ）でnavbarが壊れることです。

私はここでフィドルを持っている：Fiddle is here でもフィドルにあなたはTwitterの要素が終了し、この場合には効果が逆転しているので、余分な色がそれの後に存在していることがわかります。

私はフォントを持っていますが、あなたが喜んでいただけるフォントで私が望むものを得る方法を見つけることができたら、私はフォントを持っています。

いくつかのCSS（フィドルでもっと）：

ul { 
width: 338px; 
list-style-type: none; 
margin-left: 50%; 
padding: 0; 
overflow: hidden; 
background-color: #333; 
transform: translate(-50%, 0); 
-ms-transform: translate(-50%, 0); 
-webkit-transform: translate(-50%, 0);} 

HTML：

<div id="nav"> 
    <ul class="navbar"> 
     <li><a class='active' href='#'><span>Home</span></a></li> 
     <li><a href='#'><span>About</span></a></li> 
     <li><a href='#'><span>YouTube</span></a></li> 
     <li><a href='#'><span>Twitter</span></a></li> 
    </ul> 

Answer 1

固定値に幅を設定するには、あなたの問題を引き起こしました。ただ、display: inline-block;

参照JSFiddleをwidth: 338px;を削除し、追加します。https://jsfiddle.net/vqz208hx/