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

debugcn 发表于 Dev

安德鲁·格林

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

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

这是jsfiddle中的代码jsfiddle

您可以使用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><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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。