html - 导航栏损坏取决于屏幕尺寸/比例/比例

Question

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

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

我这里有一个 fiddle :Fiddle is here即使在 fiddle 中，您也可以看到 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/