Question

我正在尝试对齐3个文本链接 - 一个在左边，一个在中心，一个在右边，但是它们无法正确对齐。

这是html代码：

<div class="navi">
    <a href="http://mysite.com/link1/" target="_blank" class="text-left">Link 1</a>
    <a href="http://mysite.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>

相关的CSS是：

.navi {
    width: 100%;    
}

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

我做错了什么？

谢谢！

Answer 1

这不是文本对齐的工作原理。默认情况下，<a>代码为display:inline，因此您无需分配该值。您还需要将text-align分配给父容器。

这个CSS可以帮到你：

.text-left {
    float:left;
}

.text-right {
    float:right;
}

.navi {
    text-align:center;
}

Working example

Answer 2

你可以这样做......

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

您可能还想使用更多语义类名。他们应该描述元素的内容或含义，而不是演示文稿。

Answer 3

您正在使用文本对齐属性，该属性将对齐链接内的文本，而不是链接本身。

你可以把一个100％作为宽度的div，把这三个链接放在那个div中的属性

float：left

浮动：正确

即

<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;
}

Answer 4

text-align是元素内部的文本对齐方式，而不是元素的对齐方式，因此每个内联元素只是文本的宽度，并使用.navi的对齐

尝试将它们更改为内联块，并指定宽度，即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%;
}

无法对齐3个文本链接

4 个答案:

HTML

CSS