【问题标题】：Expand elements to width of div将元素扩展到 div 的宽度
【发布时间】：2016-06-02 06:40:17
【问题描述】：

我在一个容器 div 中有 27 个超链接元素。超链接是这样的字母：

一个 |乙| C | D | E | F |克| H |我 | Ĵ | ķ |大号 |中号 | N | ○ |磷 |问 |右 |小号 | T |你 |五 | W | X |是 | Z |全部

div 是页面的宽度。现在，我在锚标签上有一个类，将左右填充设置为3px，这样我就可以在管道之间留出间距。但问题是字母向左浮动，我在字母的右侧留下了一堆空白。如何实现字母间距（即填充），以便字母扩展到容器 div 的宽度？我认为填充将是动态的，它是根据容器 div 的宽度设置的。

<style type="text/css">
.container { width:100%; }
.alphabetLinks { padding: 0px 3px; }
</style>

<html>
<div class="container">
<a class="alphabetLinks">A</a>
|
<a class="alphabetLinks">B</a>
|
</html>

更新：解决方案必须支持 IE9 及以上版本。

【问题讨论】：

如果可以使用flex-box，只需将display:flex;添加到.container
解决方案需要与 IE9 兼容。我认为 FlexBox 是 IE10+。
解决方案是 display :table 当然，管道最终可以从单个伪或边框生成。 codepen.io/anon/pen/ZOYMWE 示例用于不需要在下面发布的答案:)

标签： html css responsive-design

【解决方案1】：

选项 1 - 适用于现代浏览器

您可以为此使用flexbox

.container {
  display: flex
}
a {
  flex: 1;
  position:relative;
  text-align:center
}
a::after {
  content: "|";
  position: absolute;
  right:0
}
a:last-of-type::after {
  content: ""
}

<div class="container">
  <a class="alphabetLinks">A</a>
  <a class="alphabetLinks">B</a>
  <a class="alphabetLinks">C</a>
  <a class="alphabetLinks">D</a>
  <a class="alphabetLinks">E</a>
  <a class="alphabetLinks">F</a>
  <a class="alphabetLinks">G</a>
  <a class="alphabetLinks">H</a>
  <a class="alphabetLinks">I</a>
  <a class="alphabetLinks">J</a>
  <a class="alphabetLinks">K</a>
  <a class="alphabetLinks">L</a>
  <a class="alphabetLinks">M</a>
  <a class="alphabetLinks">N</a>
  <a class="alphabetLinks">O</a>
  <a class="alphabetLinks">P</a>
  <a class="alphabetLinks">Q</a>
  <a class="alphabetLinks">R</a>
  <a class="alphabetLinks">S</a>
  <a class="alphabetLinks">T</a>
  <a class="alphabetLinks">U</a>
  <a class="alphabetLinks">V</a>
  <a class="alphabetLinks">Y</a>
  <a class="alphabetLinks">Z</a>
  <a class="alphabetLinks">ALL</a>
</div>

选项 2 - 旧版浏览器的回退

您可以为此使用css tables

.container {
  display: table;
  width:100%
}
a {
  display:table-cell;
  position:relative;
  text-align:center
}
a:after {
  content: "|";
  position: absolute;
  right:0
}
a:last-child:after {
  content: ""
}

<div class="container">
  <a class="alphabetLinks">A</a>
  <a class="alphabetLinks">B</a>
  <a class="alphabetLinks">C</a>
  <a class="alphabetLinks">D</a>
  <a class="alphabetLinks">E</a>
  <a class="alphabetLinks">F</a>
  <a class="alphabetLinks">G</a>
  <a class="alphabetLinks">H</a>
  <a class="alphabetLinks">I</a>
  <a class="alphabetLinks">J</a>
  <a class="alphabetLinks">K</a>
  <a class="alphabetLinks">L</a>
  <a class="alphabetLinks">M</a>
  <a class="alphabetLinks">N</a>
  <a class="alphabetLinks">O</a>
  <a class="alphabetLinks">P</a>
  <a class="alphabetLinks">Q</a>
  <a class="alphabetLinks">R</a>
  <a class="alphabetLinks">S</a>
  <a class="alphabetLinks">T</a>
  <a class="alphabetLinks">U</a>
  <a class="alphabetLinks">V</a>
  <a class="alphabetLinks">Y</a>
  <a class="alphabetLinks">Z</a>
  <a class="alphabetLinks">ALL</a>
</div>

【讨论】：

仅举几个例子：stackoverflow.com/a/37574227/3448527、stackoverflow.com/a/35639285/3448527、stackoverflow.com/a/36852607/3448527

【解决方案2】：

你可以这样做，使用display: table;和display: table-cell;：

HTML：

<div class="container">
    <a class="alphabetLinks">A</a>
    |
    <a class="alphabetLinks">B</a>
    |
    <a class="alphabetLinks">C</a>
    |
    <a class="alphabetLinks">D</a>
    |
    <a class="alphabetLinks">E</a>
    |
    <a class="alphabetLinks">F</a>
</div>

CSS：

.container {
    display: table;  
    width: 100%;
}
.container .alphabetLinks {
    display: table-cell;
    text-align: center;
}

JSFiddle：https://jsfiddle.net/h9fyhmha/

【讨论】：

【解决方案3】：

尝试使用text-align-last:

text-align-last CSS 属性描述了最后一行如何在强制换行符之前的块或行对齐。

我只留下了div 的课程。链接代码变短了。

.alphabetLinks {
  text-align: justify;
  text-align-last: justify;
  width: 100%;
}
.alphabetLinks a {
  padding: 0px 3px;
}

<div class="alphabetLinks">
  <a href="#">A</a> |
  <a href="#">B</a> |
  <a href="#">C</a> |
  <a href="#">D</a> |
  <a href="#">E</a> |
  <a href="#">F</a> |
  <a href="#">G</a> |
  <a href="#">H</a> |
  ...
</div>

【讨论】：