css - 让链接的文字换行而不是链接本身换行？

Question

我在列表中有链接，我用它来制作标签作为响应式设计的一部分。

当有足够的宽度时，选项卡按我希望的方式排列。但是，在较小的宽度下，最后一个选项卡换行到下一行，但我希望链接本身内的文本换行。

我无法通过将最大宽度设置为 33% 来解决此问题，因为每个页面的选项卡数量会有所不同，因此我的 CSS 解决方案需要适用于不同数量的选项卡。

<ul>
  <li>
    <a href="#" class="current">Tab 1 stuff</a>
  </li>
  <li>
    <a href="#" class="">Tab 2 stuff</a>
  </li>
  <li><a href="#" class="">Tab 3 stuff</a></li>
</ul>

ul, li {
  padding: 0;
  margin: 0;
}
li {
  display: inline;
}
a {
  float: left;
  background: green;
  color: white;
  max-width: 33%;s
}
ul {  
  width: 20%;
  border: 3px solid red;
  overflow: auto;
  margin: auto;
}

Answer 1

您可以使用 display:table; 解决此问题和 display:table-cell

看到这个 FIDDLE

CSS:

ul, li {
    padding: 0;
    margin: 0;
}
ul {
    width: 20%;
    border: 3px solid red;
    overflow: auto;
    margin: auto;
    display:table;
}
li {
    display: table-cell;
     background: green;
}
a {
    float: left;
    color: white;
}

我还更改了 <a> 的背景颜色标记到 <li>标记，以便链接之间没有空格。

编辑

好的，当容器足够宽时，链接只使用必要的宽度的解决方案是包装 <ul>在div并在该 div 上设置宽度。

看到这个 FIDDLE