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

Question

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

                        [e-mail]

                      [e-mail]

                 [e-mail]

                       [e-mail]

                       [e-mail]

[e-mail]

                        [e-mail]

因此，首先按域排序，然后按帐户排序，最后按符号对齐@。排序部分很简单，但如何让地址像这样排列起来呢？

我尝试制作 a<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，但在这种情况下我什么也没想到。

Answer 1

您可以尝试如下所示的操作。它对于复制/粘贴和链接也应该可以正常工作：a {&nbsp;display:table-row;}a span {&nbsp; display:table-cell;&nbsp; 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{&nbsp; width: 100%;&nbsp; max-width: 1000px;&nbsp; display: block;&nbsp; margin: 0 auto;&nbsp; background-color: #f9f9f9;&nbsp; text-align: center;&nbsp; padding: 10px;&nbsp; box-sizing: border-box;&nbsp; font-family: Arial;&nbsp; font-size: 15px;}a{&nbsp; display: table;&nbsp; white-space: nowrap;&nbsp; text-align: center;&nbsp; position: relative;&nbsp; padding: 4px;&nbsp; margin: 0 auto;}a span{&nbsp; position: absolute;}a span:nth-child(1){&nbsp; right: 50%;&nbsp; margin-right: 9px;}a span:nth-child(2){&nbsp; left: 50%;&nbsp; margin-left: 9px;}<div class="links">&nbsp;<a href="mailto:[e-mail]"><span>a</span>@<span>domain1.com</span></a>&nbsp;<a href="mailto:[e-mail]"><span>asd</span>@<span>domain1.com</span></a>&nbsp;<a href="mailto:[e-mail]"><span>lucknow</span>@<span>domain2.com</span></a>&nbsp;<a href="mailto:[e-mail]"><span>gg</span>@<span>domain2.com</span></a>&nbsp;<a href="mailto:[e-mail]"><span>cc</span>@<span>lorem.com</span></a>&nbsp;<a href="mailto:loremispsomdolor@"><span>loremispsomdolor</span>@<span>test.com</span></a>&nbsp;<a href="mailto:[e-mail]"><span>nameofmail</span>@<span>nameofdomain.co.in</span></a>&nbsp;<a href="mailto:[e-mail]"><span>good</span>@<span>hello.in</span></a></div>