使链接的文本换行不链接自己换行吗？

Question

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

当有足够的宽度时，标签会按照我的要求排列。但是，在较小的宽度处，最后一个标签将换行到下一行，但我希望链接本身中的文本能够换行。

我无法通过将max-width设置为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