2

I have 27 hyperlink elements in a container div. The hyperlinks are the alphabet letters like this:

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

The div is the width of the page. Right now, I have a class on the anchor tags that sets left and right padding to 3px, so that I have spacing in between the pipes. But the problem is the letters float to the left and I am left with a bunch of white space to the right of the letters. How could I achieve spacing the letters (i.e. padding), so that letters expand to width of container div? I am thinking the padding would be dynamic in such a way that it is set based on width of container 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>

UPDATE: solution must support IE9 and above.

obautista
  • 3,517
  • 13
  • 48
  • 83
  • If you can use flex-box, just add `display:flex;` to `.container` – Jacob G Jun 01 '16 at 22:19
  • Solution needs to work with IE9. I think FlexBox is IE10+. – obautista Jun 01 '16 at 22:26
  • solution is display :table of course and pipe can be generated from a single pseudo or border eventually. http://codepen.io/anon/pen/ZOYMWE example made for an answer that do not need to be posted below :) – G-Cyrillus Jun 01 '16 at 22:50

3 Answers3

2

Option 1 - for modern browsers

  • you can use flexbox for that

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

Option 2 - fallback for older browsers

  • you can use css tables for that

.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>
dippas
  • 58,591
  • 15
  • 114
  • 126
  • just a few examples: http://stackoverflow.com/a/37574227/3448527, http://stackoverflow.com/a/35639285/3448527, http://stackoverflow.com/a/36852607/3448527 – dippas Jun 01 '16 at 22:45
0

Try to use text-align-last:

The text-align-last CSS property describes how the last line of a block or a line, right before a forced line break, is aligned.

I left only the class for the div. Code for the links became shorter.

.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>
Gleb Kemarsky
  • 10,160
  • 7
  • 43
  • 68
0

You can do something like this, using display: table; and 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/

Karl
  • 5,435
  • 11
  • 44
  • 70