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

Question

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

#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;
}

if(empty($_GET['status'])){
     header('Location:YourPagesPath.php?status=1');
     exit;
}

这里是jsfiddle jsfiddle

中的代码

Answer 1

您可以使用flexbox：

#primary_nav_wrap > ul {
  display: flex;
}
#primary_nav_wrap > ul > li {
  flex-grow: 1;
}

＆＃13;

＆＃13;

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);  
  }
};

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="primary_nav_wrap">
  <ul>
    <li><a href="#"><p id="title_0"></p><span>&#9660</span></a></li>
    <li><a href="#"><p id="title_1"></p><span>&#9660</span></a></li>
    <li><a href="#"><p id="title_2"></p><span>&#9660</span></a></li>
    <li><a href="#"><p id="title_3"></p><span>&#9660</span></a></li>
    <li><a href="#"><p id="title_4"></p></a></li>
    <li><a href="#"><p id="title_5"></p><span>&#9660</span></a></li>
    <li><a href="#"><p id="title_6"></p><span>&#9660</span></a></li>
  </ul>
</nav>
<button type="submit" id="de">de</button>
<button type="submit" id="ru">ru</button>

＆＃13;

＆＃13;

＆＃13;