【发布时间】：2018-06-08 12:20:45
【问题描述】：
在典型的 HTML 网页上，这将非常容易。对于电子邮件，没那么多。
我相信你们都熟悉让电子邮件客户端以一致的方式呈现内容的挑战。它基本上会把 div 扔出窗外。
我关心的是 About、Practice Areas 等链接。
这就是它在网络浏览器中的呈现方式，非常完美。
我的问题是.. 我需要在父元素上使用 text-align:center 来使所有内容居中。但在 Outlook 2010 中，它将子元素垂直堆叠，而不是排成一行。
当我将其更改为只有表内的链接（而不是嵌套表）时，我会丢失链接上的所有填充。
有没有办法做到这一点？
<!DOCTYPE HTML>
<html>
<HEAD>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>|Jan '18|</title>
<style type="text/css">
@media(max-width: 500px) {
.frame {
width: 97% !important;
}
.fullIMG {
width: 100% !important;
}
#contentGrid {
padding: 10px 20px !important;
}
}
</style>
</head>
<BODY>
<!-- Beginning of white background table -->
<table align="center" cellspacing="0" cellpadding="0" border="0" style="width: 550px; background-color: white; border-left:1px solid black; border-right:1px solid black; opacity:.95" class="frame">
<tr>
<td>
<!-- Pre-Header -->
<tr>
<td style="text-align:center; padding: 0px 20px;">
<p style="font-family: Arial, Helvetica, sans-serif; line-height: 20px"><i>We have collected <strong>MORE THAN $1 BILLION</strong> for thousands of clients.</i></p>
</td>
</tr>
<!-- End of Pre-Header -->
<!-- Header Row -->
<tr>
<td>
<!-- Header Table -->
<table align="center" style="padding: 10px 20px 0px 20px;">
<tr>
<td align="center">
<a href="https://www.hupy.com/" target="_blank">
<img alt="Voted Best, Rated Vest" style="width: 90%; height: auto; " src="https://image.ibb.co/nai2NG/logo_tight.jpg"/>
</a>
</td>
</tr>
</table>
<!-- End of Header Table -->
</td>
</tr>
<!-- End of Header Row -->
<!-- Homebase Links Row -->
<tr>
<td>
<hr align="center" style="width:90%;">
<!-- Homebase Links Table -->
<table align="center">
<tr>
<td>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/aboutus.cfm"><strong>About</strong></a>
</td>
</tr>
</table>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px;text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/practice_areas/"><strong>Practice Areas</strong></a>
</td>
</tr>
</table>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/library/"><strong>Legal Info</strong></a>
</td>
</tr>
</table>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/case-results.cfm"><strong>Results</strong></a>
</td>
</tr>
</table>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/contact.cfm"><strong>Contacts</strong></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End of Homebase Links Table -->
</td>
</tr>
<!-- End of Homebase Row -->
<!-- Snipppet Row -->
<tr>
<td style="padding: 0px 20px" align="center">
<h2 style="font-family: Helvetica; font-size: 25px; text-align:left;">CASE RESULT: $1.5 Million for Rider Struck by Inattentive Driver</h2>
<a href="https://www.hupy.com/case_results/-1-5-million-for-rider-struck-by-inattentive-driver.cfm" target="blank">
<img class="fullIMG" src="https://image.ibb.co/eNfVbb/1_5mill.jpg" alt="$1.5 Million" style="width: 100%; height: auto; box-shadow: 3px 3px 5px rgba(165,42,42,.7)">
</a>
<p style="font-family: Helvetica; font-size: 16px; line-height: 24px; text-align:left;">In July 2017, our client and his wife were on a casual motorcycle ride in Waukesha County when the driver of a minivan failed to see their motorcycle and turned left in front of them. A terrible crash occurred and both occupants of the motorcycle were ejected. Find out what happened when Hupy and Abraham fought the insurance company to get a $1.5 million settlement.</p>
</td>
</tr>
<tr>
<td>
<a href="https://www.hupy.com/case_results/-1-5-million-for-rider-struck-by-inattentive-driver.cfm">Click me</a>
</td>
</tr>
<!-- End of Snippet Row -->
<!-- Facebook Fans Row -->
<tr>
<td>
<!-- Facebook Fans Table -->
<table align="center" style="padding: 20px 20px 0px 20px;">
<tr>
<td align="center">
<a href="https://www.facebook.com/HupyandAbraham/">
<img src="https://preview.ibb.co/e6mYUw/18000fans_tight.jpg" alt="18000fans" style="width: 85%; height: auto;">
</a>
</td>
</tr>
</table>
<!-- End of Facebook Fans Table -->
</td>
</tr>
<!-- End of Facebook Fans Row -->
<!-- Social Links Row -->
<tr>
<td>
<!-- Social Links Table -->
<table align="center" cellspacing="5" cellpadding="5" border="0">
<tr align="center">
<td align="center">
<a href="https://twitter.com/HupyandAbraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #1DA1F2);" alt="Twitter link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-twitter-96.png">
</a>
<a href="https://www.youtube.com/user/hupyandabrahamSC" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #ff0000);" alt="YouTube link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-youtube-96.png">
</a>
<a href="http://instagram.com/hupyandabraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #C32AA3);" alt="Instagram link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-instagram-96.png">
</a>
</td>
</tr>
<tr align="center">
<td>
<a href="https://www.pinterest.com/hupyandabraham/" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #BD081C);" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-pinterest-96.png">
</a>
<a href="https://www.linkedin.com/company/hupy-&-abraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #007BB5);" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-linkedin-96.png">
</a>
<a href="https://plus.google.com/+HupyandAbrahamSC" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #DB4437);" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-googleplus-96.png">
</a>
</td>
</tr>
</table>
<!-- End of Social Links Table -->
</td>
</tr>
<!-- End Social Links Row -->
</td>
</tr>
</table>
<!-- End of white background table -->
</BODY>
</html>
【问题讨论】：
-
添加代码 sn-p 而不是发布代码截图。您希望我们输入整个内容吗？
-
你为什么要为 5 个超链接制作单独的表格？你只需要 1 个
和 1 个
和 5 我尝试不为链接设置单独的表格，但它没有在 Outlook 2010 中呈现填充。但它在 Web 浏览器上出现了。在我看来，表格允许有填充，但网络链接不允许。在 Outlook 2010 的世界中..试试这个适用于网络浏览器，但不适用于 Outlook。我读过 Outlook 2010 根本不支持 Flex。我尝试了有和没有儿童桌的情况。它居中，但链接之间没有间距。最终解决一个问题并创造另一个问题。我猜这都是因为 Outlook 不会在链接上呈现填充。
标签： html css email html-table