Html 显示内容之间距离相等的内联li

我有一个问题，关于如何在ul列表中显示固定宽度、等距离的内容。问题是，我将应用不同语言的内容，所以如果我写固定大小的文本，文本将跳出ul标记。 我试图使用display-us显示一个表，但是li元素有不同的内容填充。 解决方案必须没有JS（只有HTML和CSS）

下面是JSFIDLE中的代码，您可以使用flexbox：

#主导航包裹>ul{
显示器：flex；
}
#主导航包裹>ul>li{
柔性生长：1；
}

var de=['frachden'，'Transport'，'Leistungen und Preise'，'Sicherheitszone'，'Katalog'，'Forum'，'Nützlich']；
var ru=[‘Гззззззззззззззззззззззззззз；
var-lang=0；
$（“#de”）。单击（函数（）{
朗=德；
控制台日志（“de”）；
dispLang（）；
});
$（“#ru”）。单击（函数（）{
朗=如；
控制台日志（“ru”）；
dispLang（）；
});
函数显示（）{
变种标题名；
对于（变量i=0；i<7；i++）{
titleName=lang[i]；
$（“p[id=title_“+i+”]）；
}
};
正文{
背景色：白色；
}
#主导航环绕{
宽度：712px；
高度：51px；
位置：绝对位置；
顶部：40px；
左：20px；
z指数：0；
背景:#f5；
}
#主导航包裹>ul{
列表样式：无；
宽度：712px；
保证金：0；
填充：0；
显示器：flex；
}
#主导航包裹>ul>li{
保证金：0；
填充：0；
背景:#f5；
高度：51px；
柔性生长：1；
}
#主导航包裹>ul>li:悬停{
背景：#e7e7e7
}
#主导航包裹>ul>li>a{
显示：块；
文字装饰：无；
线高：32px；
文本对齐：居中；
字体大小：15px；
颜色：#16568e；
高度：41px；
填充顶部：10px；
}
#主导航包裹>ul>li>a>p{
保证金：0；
}
#主导航包裹>ul>li>a>span{
字号：8px；
颜色：#阿巴巴；
左：3倍；
}










判定元件
ru
您可以使用flexbox：

#主导航包裹>ul{
显示器：flex；
}
#主导航包裹>ul>li{
柔性生长：1；
}


var de=['frachden'，'Transport'，'Leistungen und Preise'，'Sicherheitszone'，'Katalog'，'Forum'，'Nützlich']；
var ru=[‘Гззззззззззззззззззззззззззз；
var-lang=0；
$（“#de”）。单击（函数（）{
朗=德；
控制台日志（“de”）；
dispLang（）；
});
$（“#ru”）。单击（函数（）{
朗=如；
控制台日志（“ru”）；
dispLang（）；
});
函数显示（）{
变种标题名；
对于（变量i=0；i<7；i++）{
titleName=lang[i]；
$（“p[id=title_“+i+”]）；
}
};
正文{
背景色：白色；
}
#主导航环绕{
宽度：712px；
高度：51px；
位置：绝对位置；
顶部：40px；
左：20px；
z指数：0；
背景:#f5；
}
#主导航包裹>ul{
列表样式：无；
宽度：712px；
保证金：0；
填充：0；
显示器：flex；
}
#主导航包裹>ul>li{
保证金：0；
填充：0；
背景:#f5；
高度：51px；
柔性生长：1；
}
#主导航包裹>ul>li:悬停{
背景：#e7e7e7
}
#主导航包裹>ul>li>a{
显示：块；
文字装饰：无；
线高：32px；
文本对齐：居中；
字体大小：15px；
颜色：#16568e；
高度：41px；
填充顶部：10px；
}
#主导航包裹>ul>li>a>p{
保证金：0；
}
#主导航包裹>ul>li>a>span{
字号：8px；
颜色：#阿巴巴；
左：3倍；
}










判定元件
ru
为什么要将flexbox注释掉？用它来代替表格。差不多了，但是为什么你要把flexbox注释掉呢？用那个代替桌子。差不多，但是
<nav id="primary_nav_wrap">
  <ul>
    <li><a href="#">Грузы<span>&#9660</span></a></li>
    <li><a href="#">Транспорт<span>&#9660</span></a></li>
    <li><a href="#">Услуги и цены<span>&#9660</span></a></li>
    <li><a href="#">Зона надежности<span>&#9660</span></a></li>
    <li><a href="#">Каталог</a></li>
    <li><a href="#">Форум<span>&#9660</span></a></li>
    <li><a href="#">Полезное<span>&#9660</span></a></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;
}