我想显示这样的电子邮件地址列表： a@domain1.com asd@domain1.com dsasadsd@domain2.com gg@domain2.com cc@g.comhinxterpexterpoxterfinter@e.com j@foxyfarmfetched.com因此，首先按域排序，然后按帐户排序，最后按符号对齐@。排序部分很简单，但如何让地址像这样排列起来呢？我尝试制作 a<table>并将这些部分放在不同的单元格中，但结果是在复制粘贴它们时出现了一个额外的TAB字符：a @domain1.comasd @domain1.comdsasadsd @domain2.comgg @domain2.comcc @g.comhinxterpexterpoxterfinter @e.comj @foxyfarmfetched.com不酷。为了获得奖励积分，最好让每个电子邮件地址mailto:也成为可点击的链接，如果地址被分成两个单元格，这是不可能的。有没有其他方法可以达到这个效果，还是我运气不好？我相当精通 HTML/CSS，但在这种情况下我什么也没想到。
2 回答
噜噜哒
TA贡献1784条经验 获得超7个赞
您可以尝试如下所示的操作。它对于复制/粘贴和链接也应该可以正常工作：
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>
浮云间
TA贡献1829条经验 获得超4个赞
您还可以通过 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: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>
- 2 回答
- 0 关注
- 59 浏览
添加回答
举报
0/150
提交
取消