javascript - 调整链接大小等距

我有一个顶部的标签栏，其中包含4个不同的标签。我的问题是，由于制表符标题的长度不一样，因此看起来好像空白处最小，而最小的标题之间有很大的间距，而其他所有内容都局促起来（看起来像这样：）。缩小屏幕浏览器大小（iPhone 5s的屏幕尺寸）时，您可以确切地看到我的意思。

为了解决这个问题，我添加了左右间距（示例在这里：https://codepen.io/bigzee/pen/XKLKxG）。但是，现在将浏览器缩小（iPhone 5s屏幕尺寸）时，标题会重叠。我尝试使用z-index修复此问题，但这没有用。这是我的z-index代码：

<div class="tabs-striped tabs-top tabs-background-royal" >
    <div class="tabs" style="position: relative;">
        <a class="bar-royal tab-item" style="color:white; position: relative; z-index: 1;">
            <p class="" style="position: relative; left: 5%;">Top</p>
        </a>
        <a class="bar-royal tab-item" style="color:white; position: relative; z-index: 2;">
            <p class="" style="position: relative; right: 15%;">Top tab 2</p>
        </a>
        <a class="bar-royal tab-item" style="color:white; position: relative; z-index: 3;">
            <p class="" style="position: relative; right: 15%;">Top tab 3</p>
        </a>
        <a class="bar-royal tab-item" style="color:white; position: relative; z-index: 4;">
            <p class="" style="position: relative; right: 15%;">Top tab tab 4</p>
        </a>
    </div>
</div>

我也尝试使用行/列（https://codepen.io/bigzee/pen/OXZXom），但看起来仍然不正确。行/列的代码如下：

<div class="tabs-striped tabs-top tabs-background-royal" >
    <div class="tabs row" style="">
        <a class="bar-royal tab-item col col-10" style="color:white; min-width: 40px; margin-left: 2%;">
            <p class="" style="">Top</p>
        </a>
        <a class="bar-royal tab-item  col col-30" style="color:white;">
            <p class="" style="">Top tab 2</p>
        </a>
        <a class="bar-royal tab-item  col col-30" style="color:white;">
            <p class="" style="">Top tab 3</p>
        </a>
        <a class="bar-royal tab-item  col col-30" style="color:white;">
            <p class="" style="">Top tab tab 4</p>
        </a>
    </div>
</div>

关于如何解决此问题的任何建议？

解：

https://codepen.io/bigzee/pen/PzAzvK

公认的答案提供了解决方法。我只是添加了一个媒体查询来设置最大字体大小，以便在较小的屏幕上字体会变小。

最佳答案

使用display: inline-block

.container {
  width: 320px;
  background-color: rgba(0, 0, 0, .1);
  height: 100vh;
  overflow: hidden;
  margin: 0 auto;
}
* {
  margin: 0;
  padding: 0;
}
.top-menu {
  text-align: center;
}
ul {
  display: inline-flex;
  }
li {
  display: inline-block;
}
li {
  list-style: none;
  border: 1px solid;
  padding: 1em;
}

<div class="container">
  <div class="top-menu">
    <ul>
      <li>top</li>
      <li>top tab 2</li>
      <li>top tab 3</li>
      <li>top tab tab 4</li>
    </ul>
  </div>
</div>