Html Can'；t对齐3个文本链接

我正在尝试对齐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>

我做错了什么

---

谢谢

文本对齐不是这样工作的<代码>

文本对齐不是这样工作的<代码>

您可以这样做

HTML

---

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

你可以这样做

HTML

---

您可能还希望使用更多的语义类名。它们应该描述元素的内容或含义，而不是表示形式。

您使用的是文本对齐属性，它将对齐链接内部的文本，而不是链接本身

您可以放置一个宽度为100%的div，并使用属性将这三个链接放置在该div中

浮动：左

浮球：对

i、 e

.向左浮动{
浮动：左；
文本对齐：左对齐；
}
.向左浮动{
浮动：对；
文本对齐：右对齐；
宽度：33%；
}
.浮动中心{
显示：内联
文本对齐：居中；
}

您使用的是文本对齐属性，它将对齐链接内部的文本，而不是链接本身

您可以放置一个宽度为100%的div，并使用属性将这三个链接放置在该div中

浮动：左

浮球：对

i、 e

.向左浮动{
浮动：左；
文本对齐：左对齐；
}
.向左浮动{
浮动：对；
文本对齐：右对齐；
宽度：33%；
}
.浮动中心{
显示：内联
文本对齐：居中；
}

文本对齐是元素内部的文本对齐方式，而不是元素的对齐方式，因此每个inlines元素只是文本的宽度，并使用.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%;
}

---

文本对齐是元素内部的文本对齐，而不是元素的对齐，因此每个内联线元素都只是文本的宽度，并使用.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%;
}

---

在

display:inline

之后应该有一个分号<默认情况下，code>a元素也是内联的。在

display:inline

之后应该有一个分号

a

元素在默认情况下也是

内联的

。感谢重播和帮助，最终使用了上面@AlienWebguy的答案，因为它涉及的代码量最短。感谢重播和帮助，最终使用了上面@AlienWebguy的答案，因为它涉及的代码量最短。感谢重播和帮助，最终使用了上面@AlienWebguy的答案，因为它涉及的代码量最短。感谢重播和帮助，最终使用了上面@AlienWebguy的答案，因为它涉及的代码量最短。感谢重播和帮助，最终使用了上面@AlienWebguy的答案，因为它涉及最短的代码量。感谢您的重播和帮助，最终使用了@AlienWebguy的答案，因为它涉及最短的代码量。

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

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

.text-left {
    float: left;
}

.text-right {
    float: right;
}

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

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

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