CODEWITHSUNDEEP
htmlcsstext-alignjustify
Alex Pliutau
Alex Pliutau

Reputation: 21957

text-align: justify not working

HTML

<div id="menu">
    <a href="#">Commissions</a>
    <a href="#">Business Setup</a>
    <a href="#">Administrator</a>
    <a href="#">Content Management</a>
    <a href="#">Inventory</a>
    <a href="#">Communications Tools</a>
    <a href="#">Genealogy</a>
    <a href="#">Reports</a>
</div>

CSS

#menu {
    width: 1000px;
    float: left;
    font-size: 9pt;
    text-align: justify;
}
#menu a {
    text-decoration: none;
    color: #0066cc;
    font-size: 9pt;
}
#menu a:hover {
    text-decoration: underline;
}

I want to make each links to have the whole width. I tried to implement so with text-align: justify. But it's not working. How can I do this?

Upvotes: 3

Views: 12568

Answers (3)

TorranceScott
TorranceScott

Reputation: 1527

This will make evenly spaced divs(can be links or about any element). The issue you ran in to is that justify doesn't work on a single line of text (or the last line of text). That is why you need the :after psuedo element.

Html:

<div class="wrapper">
  <div>This can be anything.</div>
  <div>This can be anything.</div>
  <div>This can be anything.</div>
  <div>This can be anything.</div>
  <div>This can be anything.</div>
  <div>This can be anything.</div>
</div>

Css:

.wrapper{
  text-align: justify;
}
.wrapper div{
  display: inline-block;
}
.wrapper:after{
  content: "";
  width: 100%;
  display: inline-block;
}

Upvotes: 5

Flack
Flack

Reputation: 5892

No. All links have different length. But length between these links should be the same.

I have only a tables solution. http://jsfiddle.net/Flack/Q7z6q/

I know it's dirty and will be glad if someone comes with a better idea.

Upvotes: 0

Lucas
Lucas

Reputation: 10646

I'm not sure if I completely understand your question, but by the sounds of things you want justify to do something that it was not designed to do.

Only when a line of text wraps at the right edge of a container will the text be justified.

This however, cannot really happen in your menu.

So instead of a justify fix (I say fix, although nothing is broken), I instead have another suggestion.

From my understanding you want your links evenly spread across your div.

The best way I can think of is to give the a elements a percentage based width based on the number of links and align to center instead of justify.

For example:

#menu a {
    text-decoration: none;
    color: #0066cc;
    font-size: 9pt;
    width: 12%;
    display: inline-block;
    text-align: center;
}

I don't know if it is what you want but you can try it and see what you think.

Upvotes: 2

Related Questions