Can't align 3 text links

I'm trying to alignt 3 text links - one to the left, one to the center, and one to the right, but they won't align correctly.

Here's the html code:

<div class="navi">
    <a href="http://mysite.com/link1/" target="_blank" class="text-left">Link 1</a>
    <a href="http://mysi开发者_开发知识库te.com/link2/" target="_blank" class="text-center">Link 2</a>
    <a href="http://mysite.com/link3/" target="_blank" class="text-right">Link 3</a>
 </div>

The relevant CSS is:

.navi {
    width: 100%;    
}

.text-left {
    display: inline
    text-align: left;
}
.text-right {
    display: inline
    text-align: right;
}
.text-center {
    display: inline
    text-align: center;
}

What am I doing wrong?

Thanks!

That's not how text-alignment works. <a> tags are display:inline by default so you don't need to assign that value. You also need to assign the text-align to the parent container.

This CSS should do the trick for you:

.text-left {
    float:left;
}

.text-right {
    float:right;
}

.navi {
    text-align:center;
}

Working example

You could do it this way...

HTML

<div class="navi">
    <a href="http://mysite.com/link1/" target="_blank" class="text-left">Link 1</a>
    <a href="http://mysite.com/link3/" target="_blank" class="text-right">Link 3</a>
    <a href="http://mysite.com/link2/" target="_blank" class="text-center">Link 2</a>
</div>

CSS

.navi {
    width: 100%; /* Probably no need for this */    
}

.text-left {
    float: left;
}

.text-right {
    float: right;
}

.text-center {
    display: block;
    text-align: center;
}

jsFiddle.

You may also want to use more semantic class names. They should describe the element's content or meaning, not the presentation.

You are using the text align property, which will align the text inside the link and not the link itself.

You can put a div with 100% as the width, and put these three links in that div with the property

float :left

float: right

i.e

<div width="100%" style="float:left">
   <a href='' class='float-left'/>
   <a href='' class='float-center'/>
   <a href='' class='float-right'/>  
</div>

.float-left{
  float:left;
  text-align :left;
}

.float-left{
  float:right;
  text-align :right;
  width: 33%;
}

.float-center {
    display: inline
    text-align: center;
}

text-align is the text alignment inside the element, not the alignment of the elements, so each of the inlines elements is just the width of the text, and use the alignment of .navi

try changing them to inline block, and specifying widths i.e. 33%

.navi {
    width: 100%;    
}

.text-left {
    display: inline-block;
    text-align: left;
    width: 33%;
}
.text-right {
    display: inline-block;
    text-align: right;
    width: 33%;
}
.text-center {
    display: inline-block;
    text-align: center;
    width: 33%;
}