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