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

Question

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

A | B | C | D | E | F | G | H |我| J | K | L | M | N | O | P |问| R | S | T | U | V | W | X | Y | Z | ALL

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及更高版本。

Answer 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>

Answer 2

尝试使用text-align-last：

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

我只留下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>

Answer 3

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

将元素扩展为div的宽度

3 个答案:

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

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