我想顯示這樣的電子郵件地址列表： a@domain1.com asd@domain1.com dsasadsd@domain2.com gg@domain2.com cc@g.comhinxterpexterpoxterfinter@e.com j@foxyfarmfetched.com因此，首先按域排序，然后按帳戶排序，最后按符號(hào)對(duì)齊@。排序部分很簡(jiǎn)單，但如何讓地址像這樣排列起來(lái)呢？我嘗試制作 a<table>并將這些部分放在不同的單元格中，但結(jié)果是在復(fù)制粘貼它們時(shí)出現(xiàn)了一個(gè)額外的TAB字符：a @domain1.comasd @domain1.comdsasadsd @domain2.comgg @domain2.comcc @g.comhinxterpexterpoxterfinter @e.comj @foxyfarmfetched.com不酷。為了獲得獎(jiǎng)勵(lì)積分，最好讓每個(gè)電子郵件地址mailto:也成為可點(diǎn)擊的鏈接，如果地址被分成兩個(gè)單元格，這是不可能的。有沒(méi)有其他方法可以達(dá)到這個(gè)效果，還是我運(yùn)氣不好？我相當(dāng)精通 HTML/CSS，但在這種情況下我什么也沒(méi)想到。
2 回答
嚕嚕噠
TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超7個(gè)贊
您可以嘗試如下所示的操作。它對(duì)于復(fù)制/粘貼和鏈接也應(yīng)該可以正常工作：
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貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超4個(gè)贊
您還可以通過(guò) cssposition屬性來(lái)實(shí)現(xiàn)，如下所示。在 Chrome、FF 和 EDGE 上
進(jìn)行測(cè)試，鏈接也工作正常。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 關(guān)注
- 106 瀏覽
添加回答
舉報(bào)
0/150
提交
取消