Display inline li with equal distance between content - html

Question

I have a question about how to display in ul list with fixed width, content with equal distance. Problem that I'll apply content in different languages, so text will jump out of ul tag if I write fixed sizes.
I'm trying to use display us a table, but li element has different content padding.
And solution must be without JS(only HTML and CSS).
<nav id="primary_nav_wrap">
<ul>
<li>Грузы<span>&#9660</span></li>
<li>Транспорт<span>&#9660</span></li>
<li>Услуги и цены<span>&#9660</span></li>
<li>Зона надежности<span>&#9660</span></li>
<li>Каталог</li>
<li>Форум<span>&#9660</span></li>
<li>Полезное<span>&#9660</span></li>
</ul>
</nav>
.
#primary_nav_wrap {
width: 730px;
height: 51px;
background: #f5f5f5;
}
#primary_nav_wrap ul {
list-style: none;
width: 712px;
margin: 0;
padding: 0;
}
#primary_nav_wrap ul a {
display: block;
color: #333;
text-decoration: none;
font-size: 14px;
line-height: 32px;
text-align: center;
vertical-align: middle;
}
#primary_nav_wrap ul a span {
font-size: 8px;
color: #ababab;
padding-left: 3px;
}
#primary_nav_wrap ul li {
margin: 0;
padding: 0;
background: #f5f5f5;
}
#primary_nav_wrap ul li:hover {
background: #1e88e5;
}
#primary_nav_wrap > ul {
display: table;
table-layout: initial;
}
#primary_nav_wrap > ul > li {
height: 51px;
display: table-cell;
margin: 0 auto;
}
#primary_nav_wrap > ul > li:hover {
background: #e7e7e7
}
#primary_nav_wrap > ul > li > a {
font-size: 15px;
color: #16568e;
height: 41px;
padding-top: 10px;
}
here is code in jsfiddle jsfiddle

Answer 1

You can use flexbox:
#primary_nav_wrap > ul {
display: flex;
}
#primary_nav_wrap > ul > li {
flex-grow: 1;
}
var de = [ 'Frachten', 'Transport', 'Leistungen und Preise', 'Sicherheitszone', 'Katalog', 'Forum', 'Nützlich' ];
var ru = [ 'Грузы', 'Транспорт', 'Услуги и цены', 'Зона надежности', 'Каталог', 'Форум', 'Полезное' ];
var lang = 0;
$("#de").click(function () {
lang = de;
console.log("de");
dispLang();
});
$("#ru").click(function () {
lang = ru;
console.log("ru");
dispLang();
});
function dispLang () {
var titleName;
for (var i = 0; i < 7; i++) {
titleName = lang[i];
$("p[id=title_" + i + "]").append(titleName);
}
};
body {
background-color: white;
}
#primary_nav_wrap {
width: 712px;
height: 51px;
position: absolute;
top: 40px;
left: 20px;
z-index: 0;
background: #f5f5f5;
}
#primary_nav_wrap > ul {
list-style: none;
width: 712px;
margin: 0;
padding: 0;
display: flex;
}
#primary_nav_wrap > ul > li {
margin: 0;
padding: 0;
background: #f5f5f5;
height: 51px;
flex-grow: 1;
}
#primary_nav_wrap > ul > li:hover {
background: #e7e7e7
}
#primary_nav_wrap > ul > li > a {
display: block;
text-decoration: none;
line-height: 32px;
text-align: center;
font-size: 15px;
color: #16568e;
height: 41px;
padding-top: 10px;
}
#primary_nav_wrap > ul > li > a > p {
margin: 0;
}
#primary_nav_wrap > ul > li > a > span {
font-size: 8px;
color: #ababab;
padding-left: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="primary_nav_wrap">
<ul>
<li><p id="title_0"></p><span>&#9660</span></li>
<li><p id="title_1"></p><span>&#9660</span></li>
<li><p id="title_2"></p><span>&#9660</span></li>
<li><p id="title_3"></p><span>&#9660</span></li>
<li><p id="title_4"></p></li>
<li><p id="title_5"></p><span>&#9660</span></li>
<li><p id="title_6"></p><span>&#9660</span></li>
</ul>
</nav>
<button type="submit" id="de">de</button>
<button type="submit" id="ru">ru</button>