aligning spans horizontally with uneven amount of tabs - css

Question

Hi SO I have what one day might be used on my web page that is a block of tabs (very basic currently) and I want them to be aligned in such a way that there is 5 blocks on the first line and 4 blocks on the second but they both align horizontally to end at the same point (so it doesn't look like one is missing)
here is a link to what I have currently http://jsfiddle.net/xs8d6zuh/2/
html -
<span>twenty letters long</span>
<span>twelve lette</span>
<span>eight123</span>
<span>ten letter</span><br></br>
<span>twenty letters long!</span>
<span>sixteen letters!</span>
<span>1seven</span>
<span>sixsix</span>
CSS -
a {
text-decoration: none;
color: #000000;
border: 2px;
background-color: #f6f0e0;
font-family: Arial;
font-size: 14px;
padding: 6px;
border: 1px solid;
border-color: #d5c898;
display: inline;
width: 123px;
text-align: center;
}
a:hover {
background-color: #000000;
color: #f6f0e0;
}

Answer 1

<div class="container">
Bavaria
twenty letters long
twelve lette
eight123
ten letter
twenty letters long!
sixteen letters!
1seven
sixsix
</div>
CSS
.container {
font-size: 0px;
}
a {
text-decoration: none;
text-align: center;
color: #000000;
background-color: #f6f0e0;
font-family: Arial;
font-size: 14px;
padding: 6px;
border: 1px solid #d5c898;
display: inline-block;
}
a.five {
width: calc(20% - 14px);
}
a.four {
width: calc(25% - 14px);
}
a:hover {
background-color: #000000;
color: #f6f0e0;
}
https://jsfiddle.net/xs8d6zuh/2/

Answer 2

use calc() function
"for first 4 use width:calc(100% / 4);
for remaining 3 use width:calc(100% / 3);"
if u have 7 span elements

Answer 3

Flexbox can do that:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
}
span {
flex: 1 0 20%;
display: block;
text-align: center;
}
a {
display: block;
text-decoration: none;
color: #000000;
border: 2px;
padding: 6px;
background-color: #f6f0e0;
font-family: Arial;
font-size: 14px;
border: 1px solid;
border-color: #d5c898;
}
a:hover {
background-color: #000000;
color: #f6f0e0;
}
<div class="container">
<span>Bavaria</span>
<span>twenty letters long</span>
<span>twelve lette</span>
<span>eight123</span>
<span>ten letter</span>
<span>twenty letters long!</span>
<span>sixteen letters!</span>
<span>1seven</span>
<span>sixsix</span>
</div>
JSfiddle Demo