您可以通过其中的符号对齐文本吗？答案

【问题标题】：Can you align text by a symbol in it?您可以通过其中的符号对齐文本吗？
【发布时间】：2020-06-05 03:18:39
【问题描述】：

我想显示这样的电子邮件地址列表：

                        a@domain1.com
                      asd@domain1.com
                 dsasadsd@domain2.com
                       gg@domain2.com
                       cc@g.com
hinxterpexterpoxterfinter@e.com
                        j@foxyfarmfetched.com

因此，首先按域排序，然后按帐户排序，并全部由@ 符号对齐。排序部分是微不足道的，但我怎样才能让地址像这样排列呢？

我尝试制作一个<table> 并将各个部分放在不同的单元格中，但结果是在复制粘贴它们时会有一个额外的TAB 字符：

a    @domain1.com
asd    @domain1.com
dsasadsd    @domain2.com
gg    @domain2.com
cc    @g.com
hinxterpexterpoxterfinter    @e.com
j    @foxyfarmfetched.com

不酷。对于奖励积分，最好将每个电子邮件地址也设为可点击的mailto: 链接，如果地址被分成两个单元格，这是不可能的。

有没有其他方法可以达到这个效果，还是我运气不好？我对 HTML/CSS 相当精通，但在这种情况下什么都没有想到。

【问题讨论】：

标签： html css alignment

【解决方案1】：

您可以尝试以下方法。它也应该适用于复制/粘贴和链接：

a {
 display:table-row;
}
a span {
  display:table-cell;
  text-align:right;
}

<a href="mailto:a@domain1.com"><span>a@</span>domain1.com</a>
<a href="mailto:asd@domain1.com"><span>asd@</span>domain1.com</a>
<a href="mailto:dsasadsd@domain2.com"><span>dsasadsd@</span>domain2.com</a>
<a href="mailto:gg@domain2.com"><span>gg@</span>domain2.com</a>
<a href="mailto:cc@g.com"><span>cc@</span>g.com</a>
<a href="mailto:hinxterpexterpoxterfinter@e.com"><span>hinxterpexterpoxterfinter@</span>e.com</a>
<a href="mailto:j@foxyfarmfetched.com"><span>j@</span>foxyfarmfetched.com</a>

【讨论】：

这太棒了！除了.. 它不适用于我想要的另一件事 - 每个地址旁边的几个按钮。不过公平地说，我没想过要这个，所以我会接受这个答案。
@Vilx-您仍然可以提出另一个问题或编辑这个问题，我很确定我们可以找到不同的方法;)
现在太累了……也许明天……如果你有什么想法，请发帖！
@Vilx- 一个快速的想法是为放置在它旁边的按钮考虑一个额外的包装器：jsfiddle.net/3j5w9xLo（确保每行的高度相同以保持对齐）

【解决方案2】：

您也可以通过 css position 属性实现如下所示。
在 Chrome、FF 和 EDGE 上测试 copy/paste 也可以正常工作，mailto: 链接也是如此。

.links{
  width: 100%;
  max-width: 1000px;
  display: block;
  margin: 0 auto;
  background-color: #f9f9f9;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  font-family: Arial;
  font-size: 15px;
}
a{
  display: table;
  white-space: nowrap;
  text-align: center;
  position: relative;
  padding: 4px;
  margin: 0 auto;
}
a span{
  position: absolute;
}
a span:nth-child(1){
  right: 50%;
  margin-right: 9px;
}
a span:nth-child(2){
  left: 50%;
  margin-left: 9px;
}

<div class="links">
 <a href="mailto:a@domain1.com"><span>a</span>@<span>domain1.com</span></a>
 <a href="mailto:asd@domain1.com"><span>asd</span>@<span>domain1.com</span></a>
 <a href="mailto:lucknow@domain2.com"><span>lucknow</span>@<span>domain2.com</span></a>
 <a href="mailto:gg@domain2.com"><span>gg</span>@<span>domain2.com</span></a>
 <a href="mailto:cc@lorem.com"><span>cc</span>@<span>lorem.com</span></a>
 <a href="mailto:loremispsomdolor@"><span>loremispsomdolor</span>@<span>test.com</span></a>
 <a href="mailto:nameofmail@nameofdomain.co.in"><span>nameofmail</span>@<span>nameofdomain.co.in</span></a>
 <a href="mailto:good@hello.in"><span>good</span>@<span>hello.in</span></a>
</div>

【讨论】：