导航栏根据屏幕尺寸/比例/比例而损坏

Question

所以基本上我有一个导航栏，我想要只有一定的宽度。它有4个元素，我希望它正好是这些元素的宽度。这是我工作的计算机上的样子。

这正是我想要它的样子。导航栏完美地终止于最后一个元素的末尾，并且它居中。我自己能够实现这一目标的唯一方法是将其设置为338px的固定宽度。我的问题是导航栏在我自己的计算机以外的设备上断开（例如我的手机，笔记本电脑）。

我有一个小提琴：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

将宽度设置为固定值会导致问题。只需删除width: 338px;并添加display: inline-block;

即可

参见JSFiddle：https://jsfiddle.net/vqz208hx/