0

我正在尝试设置li元素的样式以动态匹配其文本内容，并且它们之间的间距相等，li's但似乎无法做到这一点。

结果目前看起来像： 在此处输入图像描述

我希望它们之间的空白li's是一致的，但整体li's是动态宽度但不超过一定宽度：（因为有两种不同ul's的样式，它们是具有不同填充的样式，所以这就是左侧菜单和左侧菜单之间的空间大小不同的原因正确的菜单，但每个菜单li在各自的位置始终保持间距ul's） 在此处输入图像描述

css是（任意）：

li{
   display: inline-block;
   max-width: 95px;
   padding: 5px 10px;
   etc....
}

我正在尝试使用 css 来完成此操作，尽可能避免使用 JavaScript 或 html 标记。谢谢你。

4

2 回答 2

0

这针对 Opera、Chrome 和 IE10 进行了优化。Firefox 和 Safari 遵循较旧的 Flexbox 规范，并且当列表中的项目数量平衡时看起来最好。对于非 Flexbox 浏览器，有一个不错的后备方案。您可能需要添加额外的样式来掩盖不均匀的列表高度。

http://codepen.io/cimmanon/pen/HxLvf

nav {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

ul {
  display: table-cell; /* non-flexbox browsers */
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

li {
  display: table-cell; /* non-flexbox browsers */
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1 1 10em;
  -ms-flex: 1 1 10em;
  flex: 1 1 10em;
  width: 10em; /* for old Firefox/Safari */
  /* for vertical/center alignment */
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-flex-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}

/* pretty it up! */
nav {
  background: #99D;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: .5em 1em;
  background: white;
  border: 1px solid;
}


<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Latest Projects</a></li>
        <li><a href="#">Products & Eco Funding</a></li>
        <li><a href="#">The Green Deal</a></li>
    </ul>

    <ul>
        <li><a href="#">Latest Projects</a></li>
        <li><a href="#">Job Vacancies</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</nav>

事实上，您有 2 个列表要在其中均衡元素的宽度，这使得 Flexbox 成为必要。如果您只有一个列表，您可以将整个事情简化为仅使用display: tableonul和display: table-cell.li

于 2013-03-31T19:21:38.333 回答
0

如果您希望元素之间的空格相同，即。较小的标题将具有较小的菜单项，例如您的图像中，那么您就不走运了。我认为没有 JavaScript 就无法做到这一点。

如果您要设置统一宽度的菜单项，那么这很容易完成，只需将<li>s 设置为100%/(number of menu items)并浮动它们。

li {
    float:left;
    width:14.2857% /* 100/17 */
}
于 2013-03-31T17:04:35.620 回答