user6689604 user6689604 - 3 months ago 11
CSS Question

Resizing link to be equidistant

I have a top tab bar with 4 different tabs. My issue is that due to the fact that the tab titles are not around the same length, they look like they padding is off where the smallest title has a lot of spacing, while everything else is very cramped together (Example of this: https://codepen.io/bigzee/pen/XKLKxG). You can see exactly what I mean when you make the screen browser small (iPhone 5s screen size)

To solve this, I added in left/right spacing (Example here: https://codepen.io/bigzee/pen/OXZXom). However, now when you make the browser small (iPhone 5s screen size) the titles overlap. I tried to use z-index to fix this, but that didn't work. Here's my code with the 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>


I tried using rows/columns as well (https://codepen.io/bigzee/pen/PzAzvK) but it was still didn't look right. The code for the rows/columns is below:

<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>


Any advice on how I can fix this?

Solution:



http://codepen.io/bigzee/pen/XKLymE

The accepted answer has the solution on how to fix this. I simply added in a media query to set a max font-size so that on smaller screens the font gets smaller.



Answer

Use 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>