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

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

一种至少接近您想要的方法：使用 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>

Answer 2

这是我想到的。有点 "dirty" 但它完全符合您的要求。你可能会找到改进代码的方法，因为我的代码运行了两次相同的循环，但我写得很快。至少你会得到一个想法。

首先，将标签的显示设置为内联块，以便能够测量所有标签的最大宽度。获得最大宽度后，遍历所有元素，将每个字符包装在一个范围内，并将标签的显示设置为 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/

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

how to justify text in multiple links vertically

html

css

letter-spacing