我在容器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及更高版本。
答案 0 :(得分:2)
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>
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>
答案 1 :(得分:0)
尝试使用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>
答案 2 :(得分:0)
您可以使用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/