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

Question

我想显示这样的电子邮件地址列表：                        [e-mail]                      [e-mail]                 [e-mail]                       [e-mail]                       [e-mail][e-mail]                        [e-mail]因此，首先按域排序，然后按帐户排序，最后按符号对齐@。排序部分很简单，但如何让地址像这样排列起来呢？我尝试制作 a<table>并将这些部分放在不同的单元格中，但结果是在复制粘贴它们时出现了一个额外的TAB字符：a    @domain1.comasd    @domain1.comdsasadsd    @domain2.comgg    @domain2.comcc    @g.comhinxterpexterpoxterfinter    @e.comj    @foxyfarmfetched.com不酷。为了获得奖励积分，最好让每个电子邮件地址mailto:也成为可点击的链接，如果地址被分成两个单元格，这是不可能的。有没有其他方法可以达到这个效果，还是我运气不好？我相当精通 HTML/CSS，但在这种情况下我什么也没想到。

Answer 1

您可以尝试如下所示的操作。它对于复制/粘贴和链接也应该可以正常工作：

a {

 display:table-row;

}

a span {

  display:table-cell;

  text-align:right;

}

<a href="mailto:[e-mail]"><span>a@</span>domain1.com</a>

<a href="mailto:[e-mail]"><span>asd@</span>domain1.com</a>

<a href="mailto:[e-mail]"><span>dsasadsd@</span>domain2.com</a>

<a href="mailto:[e-mail]"><span>gg@</span>domain2.com</a>

<a href="mailto:[e-mail]"><span>cc@</span>g.com</a>

<a href="mailto:[e-mail]"><span>hinxterpexterpoxterfinter@</span>e.com</a>

<a href="mailto:[e-mail]"><span>j@</span>foxyfarmfetched.com</a>

Answer 2

您还可以通过 cssposition属性来实现，如下所示。在 Chrome、FF 和 EDGE 上

进行测试，链接也工作正常。copy/pastemailto:

.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:[e-mail]"><span>a</span>@<span>domain1.com</span></a>

 <a href="mailto:[e-mail]"><span>asd</span>@<span>domain1.com</span></a>

 <a href="mailto:[e-mail]"><span>lucknow</span>@<span>domain2.com</span></a>

 <a href="mailto:[e-mail]"><span>gg</span>@<span>domain2.com</span></a>

 <a href="mailto:[e-mail]"><span>cc</span>@<span>lorem.com</span></a>

 <a href="mailto:loremispsomdolor@"><span>loremispsomdolor</span>@<span>test.com</span></a>

 <a href="mailto:[e-mail]"><span>nameofmail</span>@<span>nameofdomain.co.in</span></a>

 <a href="mailto:[e-mail]"><span>good</span>@<span>hello.in</span></a>

</div>