如何垂直对齐多个链接中的文本

Question

我需要垂直对齐下面的所有链接，即在左侧和右侧。
font-size 应该保持原样。
显然，唯一的方法是调整letter-spacing，但是否可以对.wrap 内的所有链接自动执行此操作。

a{display:block; text-decoration:none;}
.a1{font-size:0.7rem;}
.a2{font-size:1rem;}
.a3{font-size:1rem;}
.a4{font-size:0.7rem;}

<div class='wrap'>
<a href='index.php' class='a1'>LOREM IPSUM</a>
<a href='index.php' class='a2'>DOLOR SIT</a>
<a href='index.php' class='a3'>BLUE SKY</a>
<a href='index.php' class='a4'>DEEP OCEAN</a>
</div>

Answer 1

这就是我想出的。有点“脏”，但它正是你想要的。您可能会找到改进代码的方法，因为我的代码两次运行相同的循环，但我写得很快。至少你会有一个想法。

首先，将标签的显示设置为 inline-block 以便能够测量所有标签的最大宽度。一旦你有了 maxWidth，循环遍历所有元素，将每个字符包装在一个 span 中，并将标签的显示设置为 flex。

CSS：

a{
  display: inline-block;
  width: auto;
  justify-content: space-between;
  text-decoration:none;
  clear: both;
}
a.flex{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.a1{font-size:0.7rem;}
.a2{font-size:1rem;}
.a3{font-size:1rem;}
.a4{font-size:0.7rem;}
a span{
  display:inline-block;
}

JS：

var elements = document.querySelectorAll(".wrap > a");
 var maxWidth = 0;
 for (var i = elements.length - 1; i >= 0; i--) {
    maxWidth = Math.max(maxWidth, elements[i].offsetWidth);
 }
 for (var i = elements.length - 1; i >= 0; i--) {
    elements[i].classList.add("flex");
    elements[i].style.width = maxWidth+ "px";
    var text = elements[i].textContent;
    text.split("");
    elements[i].innerHTML = "";
    for (var j = 0; j < text.length; j++) {
       var span = document.createElement("span");
       // Fix: issue reported by Chris L
       // Replace space with non-breaking space HTML code
       span.innerHTML = (text[j] === " ")? "&nbsp;" : text[j];
       elements[i].appendChild(span);
    }
 }

这里的工作示例：https://jsfiddle.net/nLdx923c/

Answer 2

一种至少接近您想要的方法：使用text-align-last: justify，em 中的letter-spacing 值（即相对于字体大小）和包装元素上的固定宽度，找到合适的值通过反复试验：

.wrap {
  width: 95px;
}

a {
  display: block;
  text-decoration: none;
}

.a1 {
  font-size: 0.7rem;
}

.a2 {
  font-size: 1rem;
}

.a3 {
  font-size: 1rem;
}

.a4 {
  font-size: 0.7rem;
}

a {
  text-align-last: justify;
  letter-spacing: 0.08em;
}

<div class='wrap'>
  <a href='index.php' class='a1'>LOREM IPSUM</a>
  <a href='index.php' class='a2'>DOLOR SIT</a>
  <a href='index.php' class='a3'>BLUE SKY</a>
  <a href='index.php' class='a4'>DEEP OCEAN</a>
</div>