html 电子邮件模板 table header 对齐
html email template table header alignment
我必须左右浮动两个 header 对齐方式，徽标将向左浮动，导航将向右浮动，但 垂直居中
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" style="" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<!--xmlns fix Outlook Scaling-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Fix Outlook Scaling-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700|Nunito+Sans:300,400,600,700,900" id="google-fonts-css" media="all" rel="stylesheet" type="text/css" />
<title></title>
<!--[if mso]>
<style type="text/css">
body, table, td {
font-family: Arial, Helvetica, sans-serif !important;
}
</style>
<![endif]-->
<style type="text/css">
html,
body {
font-family: 'Nunito Sans', Helvetica, Arial;
margin: 0 !important;
padding: 0 !important;
text-size-adjust: none !important;
-ms-text-size-adjust: none !important;
-webkit-text-size-adjust: none !important;
-webkit-font-smoothing: antialiased;
background-color: #EEEEEE;
font-size: 16px;
}
body {
height: 100% !important;
width: 100% !important;
}
a {
text-decoration: none;
color: #002173;
}
h1 {
font-family: 'Nunito Sans', Helvetica, Arial;
}
.cus-pad {
padding-left: 20px;
padding-right: 20px;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass span,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
#outlook a {
padding: 0;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
img {
-ms-interpolation-mode: bicubic;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
/*no linky*/
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.link-hover:hover {
text-decoration: none !important;
}
table {
border-collapse: collapse;
margin: 0 auto;
padding: 20px;
}
.button:hover {
background-color: #ffd251 !important;
}
.button-2:hover {
background-color: #777671 !important;
}
tr.social-link td a img {
height: 20px;
width: auto;
}
@media only screen and (max-width: 481px) {
/**generic styles for content added through editor**/
table {
width: auto !important;
}
td {
display: block;
margin: 0 auto;
width: auto !important;
}
/**all tds added to template will wrap!**/
img {
float: none !important;
display: block;
padding: 0;
max-width: 100%;
height: auto !important;
}
/****/
.container {
padding: 0 !important;
}
.no-wrap {
width: 100% !important;
}
table.no-wrap td {
/**add class no-wrap to table to keep it from wrapping**/
display: table-cell !important;
}
table[class="resp"] {
width: auto !important;
padding: 5px !important;
}
.main-content-area {
-webkit-text-size-adjust: 90% !important;
line-height: 21px;
text-align: left;
}
.promo-code {
padding: 20px !important;
}
td[class="main-content-area"] h2 {
-webkit-text-size-adjust: 80% !important;
}
td[class="force-col"] {
/**add this class to any td you'd like to wrap in a one-column layout**/
display: block;
margin: 0 auto;
width: auto !important;
padding: 0;
}
img {
max-width: 100% !important;
height: auto !important;
}
/**hide content**/
*[class="hide-me"] {
display: none !important;
}
img[class="show-img"] {
display: block !important;
padding-top: 10px;
max-height: none !important;
width: auto !important;
height: auto !important;
}
}
.gf-e-header td a {
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}
</style>
</head>
<body style="background-color: #eeeeee;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 30px">
<tr>
<td class="container" style="" width="100%">
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="resp" width="600">
<tbody>
<tr>
<td class="cus-pad" style="padding-top: 20px">
<table align="left">
<tr class="gf-e-header">
<td class="gf-e-header">
<div style="float: left">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="130" />
</a>
</div>
</td>
<td valign="middle" align="right">
<a href="">Company</a>
<a href="">Services</a>
<a href="">Locations</a>
<a href="">Resources</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-bottom: 25px;padding-top: 20px;padding-right: 20px;padding-left: 20px;">
<div style="border:1px solid #002173"></div>
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">General information</h1>
<p style="color:#454545">The following information will provide you with an easy to navigate overview of what will happen with your personal data when you visit our website. The term „personal data“ comprises all data that can be used to personally identify you.
For detailed information about the subject matter of data protection, please consult our Data Protection Declaration, which we have included beneath this copy.</p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#FFFfFF" class="hero cus-pad">
<img src="https://i.imgur.com/f1OWoqx.jpg" width="560px" />
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">Data recording on our website</h1>
<h4 style="color:#454545">Who is the responsible party for the recording of data on this website (i.e. the„controller“)?
</h4>
</td>
</tr>
<tr>
<td align="left" class="main-content-area cus-pad"><span style="font-size: 15px; color:#454545">The data on this website is processed by the operator of the website, whose contact
information is available under section „Information Required by Law“ on this website.</span>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom: 50px;padding-top:10px;">
<div>
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
href="http://" style="height:40px;v-text-anchor:middle;width:150px;" stroke="f"
fillcolor="#70002c">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://" style="background-color:#70002c;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;">Learn
More</a>
<!--[if mso]>
</center>
</v:rect>
<![endif]-->
</div>
</td>
</tr>
<tr>
<td class="cus-pad" style="padding-top: 40px;padding-bottom:40px">
<div style="border:1px solid #002173;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 0">
<table border="0" cellpadding="0" cellspacing="0" class="resp" style="background: #FFFFFF; padding-left: 15px; padding-right: 15px;" width="600">
<tbody>
<tr>
<td align="right" style="padding: 0 0 0px 15px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="padding: 0 0 30px 0;">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="100" />
</a>
</td>
</tr>
<tr class="social-link">
<td align="center" style="padding-bottom: 30px;">
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/gWSZvGP.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/cCgx01J.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/HKXV4wh.png" alt="">
</a>
<a href="">
<img height="18px" src="https://i.imgur.com/Akw0TqM.png" alt="">
</a>
</td>
</tr>
<tr>
<td style=" color:#6C6C6C; font-size:14px;padding-bottom: 30px;">
<a style="color:#6C6C6C; border-right: 1px solid #6C6C6C; padding-right: 12px;font-weight: bold;line-height: 14px" href="">Privacy Policy</a>
<a style="color:#6C6C6C; padding-left: 10px;font-weight: bold; line-height: 14px " href="">Terms of
services</a>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr align="center">
<td style="padding-bottom: 30px;font-size: 10px">
This email was sent to <a href="">example@gmail.com</a> <br/> © 2004-2020 All rights reserved - Global Fairways®
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<br clear="all" />
</body>
</html>
并且响应式链接将在徽标之后下降。
首先你的代码很乱，我过滤了一些。我使用 display:grid; 解决了你的问题，将 header 徽标和导航容器都给了它们 1fr ，这样它们就可以均匀地使用 space ，
body {
font-family: 'Nunito Sans', Helvetica, Arial;
margin: 0 !important;
padding: 0 !important;
text-size-adjust: none !important;
-ms-text-size-adjust: none !important;
-webkit-text-size-adjust: none !important;
-webkit-font-smoothing: antialiased;
background-color: #EEEEEE;
font-size: 16px;
}
body {
height: 100% !important;
width: 100% !important;
}
a {
text-decoration: none;
color: #002173;
}
h1 {
font-family: 'Nunito Sans', Helvetica, Arial;
}
.cus-pad {
padding-left: 20px;
padding-right: 20px;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass span,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
#outlook a {
padding: 0;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
img {
-ms-interpolation-mode: bicubic;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
/*no linky*/
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.link-hover:hover {
text-decoration: none !important;
}
table {
border-collapse: collapse;
margin: 0 auto;
padding: 20px;
}
.button:hover {
background-color: #ffd251 !important;
}
.button-2:hover {
background-color: #777671 !important;
}
tr.social-link td a img {
height: 20px;
width: auto;
}
@media only screen and (max-width: 481px) {
/**generic styles for content added through editor**/
table {
width: auto !important;
}
td {
display: block;
margin: 0 auto;
width: auto !important;
}
/**all tds added to template will wrap!**/
img {
float: none !important;
display: block;
padding: 0;
max-width: 100%;
height: auto !important;
}
/****/
.container {
padding: 0 !important;
}
.no-wrap {
width: 100% !important;
}
table.no-wrap td {
/**add class no-wrap to table to keep it from wrapping**/
display: table-cell !important;
}
table[class="resp"] {
width: auto !important;
padding: 5px !important;
}
.main-content-area {
-webkit-text-size-adjust: 90% !important;
line-height: 21px;
text-align: left;
}
.promo-code {
padding: 20px !important;
}
td[class="main-content-area"] h2 {
-webkit-text-size-adjust: 80% !important;
}
td[class="force-col"] {
/**add this class to any td you'd like to wrap in a one-column layout**/
display: block;
margin: 0 auto;
width: auto !important;
padding: 0;
}
img {
max-width: 100% !important;
height: auto !important;
}
/**hide content**/
*[class="hide-me"] {
display: none !important;
}
img[class="show-img"] {
display: block !important;
padding-top: 10px;
max-height: none !important;
width: auto !important;
height: auto !important;
}
}
.header-top{
display:grid;
grid-template-columns:1fr 1fr;
place-items:center;
padding: 30px;
}
.header-top .logo{
justify-self:left;
}
.header-top .nav{
text-align:right;
display:flex;
flex-direction:row;
justify-content: right;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" style="" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<!--xmlns fix Outlook Scaling-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Fix Outlook Scaling-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700|Nunito+Sans:300,400,600,700,900"
id="google-fonts-css" media="all" rel="stylesheet" type="text/css" />
<title></title>
<!--[if mso]>
<style type="text/css">
body, table, td {
font-family: Arial, Helvetica, sans-serif !important;
}
</style>
<![endif]-->
</head>
<body style="background-color: #eeeeee;">
<table cellpadding="0" cellspacing="0" width="100%" style="margin-top: 30px">
<tr>
<td class="container" width="100%">
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="resp" width="600">
<tbody>
<tr>
<td>
<div class="header-top">
<a class="logo" href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F"
target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="130" />
</a>
<div class="nav">
<a href="">Company</a>
<a href="">Services</a>
<a href="">Locations</a>
<a href="">Resources</a>
</div>
</div>
</td>
</tr>
<tr>
<td style="padding-bottom: 25px;padding-top: 20px;padding-right: 20px;padding-left: 20px;">
<div style="border:1px solid #002173"></div>
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">General information</h1>
<p style="color:#454545">The following information will provide you with an easy to
navigate overview of what will happen with your personal data when you visit our
website. The term „personal data“ comprises all data that can be used to personally
identify you.
For detailed information about the subject matter of data protection, please consult
our Data Protection Declaration, which we have included beneath this copy.</p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#FFFfFF" class="hero cus-pad">
<img src="https://i.imgur.com/f1OWoqx.jpg" width="560px" />
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">Data recording on our website</h1>
<h4 style="color:#454545">Who is the responsible party for the recording of data on this
website (i.e. the„controller“)?
</h4>
</td>
</tr>
<tr>
<td align="left" class="main-content-area cus-pad"><span
style="font-size: 15px; color:#454545">The data on this website is processed by the
operator of the website, whose contact
information is available under section „Information Required by Law“ on this
website.</span>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom: 50px;padding-top:10px;">
<div>
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
href="http://" style="height:40px;v-text-anchor:middle;width:150px;" stroke="f"
fillcolor="#70002c">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://"
style="background-color:#70002c;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;">Learn
More</a>
<!--[if mso]>
</center>
</v:rect>
<![endif]-->
</div>
</td>
</tr>
<tr>
<td class="cus-pad" style="padding-top: 40px;padding-bottom:40px">
<div style="border:1px solid #002173;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 0">
<table border="0" cellpadding="0" cellspacing="0" class="resp"
style="background: #FFFFFF; padding-left: 15px; padding-right: 15px;" width="600">
<tbody>
<tr>
<td align="right" style="padding: 0 0 0px 15px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="padding: 0 0 30px 0;">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F"
target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="100" />
</a>
</td>
</tr>
<tr class="social-link">
<td align="center" style="padding-bottom: 30px;">
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/gWSZvGP.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/cCgx01J.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/HKXV4wh.png" alt="">
</a>
<a href="">
<img height="18px" src="https://i.imgur.com/Akw0TqM.png" alt="">
</a>
</td>
</tr>
<tr>
<td style=" color:#6C6C6C; font-size:14px;padding-bottom: 30px;">
<a style="color:#6C6C6C; border-right: 1px solid #6C6C6C; padding-right: 12px;font-weight: bold;line-height: 14px"
href="">Privacy Policy</a>
<a style="color:#6C6C6C; padding-left: 10px;font-weight: bold; line-height: 14px "
href="">Terms of
services</a>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr align="center">
<td style="padding-bottom: 30px;font-size: 10px">
This email was sent to <a href="">example@gmail.com</a> <br /> ©
2004-2020 All rights reserved - Global Fairways®
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<br clear="all" />
</body>
</html>
您的 header 目前没有占据电子邮件的全部宽度，因此请先将 width:100%; 添加到此元素。接下来，只需将 text-align:right; 或 align="right" 添加到导航部分。见下文：
<table align="left" style="width: 100%;">
<tbody>
<tr class="gf-e-header">
<td class="gf-e-header">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="130">
</a>
</td>
<td style="text-align: right;">
<a href="">Company</a>
<a href="">Services</a>
<a href="">Locations</a>
<a href="">Resources</a>
</td>
</tr>
</tbody>
</table>
您在 td 标签内使用了 table。因此，当您正确对齐列表项时，它不起作用。我更新了那部分请仔细阅读并在您的代码中更新它..快乐编码！我只是将列表项放在另一个 div.
中
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" style="" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<!--xmlns fix Outlook Scaling-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Fix Outlook Scaling-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700|Nunito+Sans:300,400,600,700,900" id="google-fonts-css" media="all" rel="stylesheet" type="text/css" />
<title></title>
<!--[if mso]>
<style type="text/css">
body, table, td {
font-family: Arial, Helvetica, sans-serif !important;
}
</style>
<![endif]-->
<style type="text/css">
html,
body {
font-family: 'Nunito Sans', Helvetica, Arial;
margin: 0 !important;
padding: 0 !important;
text-size-adjust: none !important;
-ms-text-size-adjust: none !important;
-webkit-text-size-adjust: none !important;
-webkit-font-smoothing: antialiased;
background-color: #EEEEEE;
font-size: 16px;
}
body {
height: 100% !important;
width: 100% !important;
}
a {
text-decoration: none;
color: #002173;
}
h1 {
font-family: 'Nunito Sans', Helvetica, Arial;
}
.cus-pad {
padding-left: 20px;
padding-right: 20px;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass span,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
#outlook a {
padding: 0;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
img {
-ms-interpolation-mode: bicubic;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
/*no linky*/
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.link-hover:hover {
text-decoration: none !important;
}
table {
border-collapse: collapse;
margin: 0 auto;
padding: 20px;
}
.button:hover {
background-color: #ffd251 !important;
}
.button-2:hover {
background-color: #777671 !important;
}
tr.social-link td a img {
height: 20px;
width: auto;
}
@media only screen and (max-width: 481px) {
/**generic styles for content added through editor**/
table {
width: auto !important;
}
td {
display: block;
margin: 0 auto;
width: auto !important;
}
/**all tds added to template will wrap!**/
img {
float: none !important;
display: block;
padding: 0;
max-width: 100%;
height: auto !important;
}
/****/
.container {
padding: 0 !important;
}
.no-wrap {
width: 100% !important;
}
table.no-wrap td {
/**add class no-wrap to table to keep it from wrapping**/
display: table-cell !important;
}
table[class="resp"] {
width: auto !important;
padding: 5px !important;
}
.main-content-area {
-webkit-text-size-adjust: 90% !important;
line-height: 21px;
text-align: left;
}
.promo-code {
padding: 20px !important;
}
td[class="main-content-area"] h2 {
-webkit-text-size-adjust: 80% !important;
}
td[class="force-col"] {
/**add this class to any td you'd like to wrap in a one-column layout**/
display: block;
margin: 0 auto;
width: auto !important;
padding: 0;
}
img {
max-width: 100% !important;
height: auto !important;
}
/**hide content**/
*[class="hide-me"] {
display: none !important;
}
img[class="show-img"] {
display: block !important;
padding-top: 10px;
max-height: none !important;
width: auto !important;
height: auto !important;
}
}
.gf-e-header td a {
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}
</style>
</head>
<body style="background-color: #eeeeee;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 30px">
<tr>
<td class="container" style="" width="100%">
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="resp" width="600">
<tbody>
<tr>
<td class="cus-pad" style="padding-top: 20px">
<div style="float: left">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="130" />
</a>
</div>
<div style="float:right;">
<a href="">Company</a>
<a href="">Services</a>
<a href="">Locations</a>
<a href="">Resources</a>
</div>
</td>
</tr>
<tr>
<td style="padding-bottom: 25px;padding-top: 20px;padding-right: 20px;padding-left: 20px;">
<div style="border:1px solid #002173"></div>
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">General information</h1>
<p style="color:#454545">The following information will provide you with an easy to navigate overview of what will happen with your personal data when you visit our website. The term „personal data“ comprises all data that can be used to personally identify you.
For detailed information about the subject matter of data protection, please consult our Data Protection Declaration, which we have included beneath this copy.</p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#FFFfFF" class="hero cus-pad">
<img src="https://i.imgur.com/f1OWoqx.jpg" width="560px" />
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">Data recording on our website</h1>
<h4 style="color:#454545">Who is the responsible party for the recording of data on this website (i.e. the„controller“)?
</h4>
</td>
</tr>
<tr>
<td align="left" class="main-content-area cus-pad"><span style="font-size: 15px; color:#454545">The data on this website is processed by the operator of the website, whose contact
information is available under section „Information Required by Law“ on this website.</span>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom: 50px;padding-top:10px;">
<div>
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
href="http://" style="height:40px;v-text-anchor:middle;width:150px;" stroke="f"
fillcolor="#70002c">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://" style="background-color:#70002c;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;">Learn
More</a>
<!--[if mso]>
</center>
</v:rect>
<![endif]-->
</div>
</td>
</tr>
<tr>
<td class="cus-pad" style="padding-top: 40px;padding-bottom:40px">
<div style="border:1px solid #002173;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 0">
<table border="0" cellpadding="0" cellspacing="0" class="resp" style="background: #FFFFFF; padding-left: 15px; padding-right: 15px;" width="600">
<tbody>
<tr>
<td align="right" style="padding: 0 0 0px 15px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="padding: 0 0 30px 0;">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="100" />
</a>
</td>
</tr>
<tr class="social-link">
<td align="center" style="padding-bottom: 30px;">
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/gWSZvGP.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/cCgx01J.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/HKXV4wh.png" alt="">
</a>
<a href="">
<img height="18px" src="https://i.imgur.com/Akw0TqM.png" alt="">
</a>
</td>
</tr>
<tr>
<td style=" color:#6C6C6C; font-size:14px;padding-bottom: 30px;">
<a style="color:#6C6C6C; border-right: 1px solid #6C6C6C; padding-right: 12px;font-weight: bold;line-height: 14px" href="">Privacy Policy</a>
<a style="color:#6C6C6C; padding-left: 10px;font-weight: bold; line-height: 14px " href="">Terms of
services</a>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr align="center">
<td style="padding-bottom: 30px;font-size: 10px">
This email was sent to <a href="">example@gmail.com</a> <br/> © 2004-2020 All rights reserved - Global Fairways®
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<br clear="all" />
</body>
</html>
您可以将 valign="middle" 属性更改为 align="center" 并将 height="70px" 添加到导航 table。有更好的选择，但我认为它可以满足您的需求。
<table align="right" width="70%" height="70px">
<tbody>
<tr align="center">
<td>
<a href="">Company</a>
<a href="">Services</a>
<a href="">Locations</a>
<a href="">Resources</a>
</td>
</tr>
</tbody>
</table>
我必须左右浮动两个 header 对齐方式，徽标将向左浮动，导航将向右浮动，但 垂直居中
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" style="" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<!--xmlns fix Outlook Scaling-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Fix Outlook Scaling-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700|Nunito+Sans:300,400,600,700,900" id="google-fonts-css" media="all" rel="stylesheet" type="text/css" />
<title></title>
<!--[if mso]>
<style type="text/css">
body, table, td {
font-family: Arial, Helvetica, sans-serif !important;
}
</style>
<![endif]-->
<style type="text/css">
html,
body {
font-family: 'Nunito Sans', Helvetica, Arial;
margin: 0 !important;
padding: 0 !important;
text-size-adjust: none !important;
-ms-text-size-adjust: none !important;
-webkit-text-size-adjust: none !important;
-webkit-font-smoothing: antialiased;
background-color: #EEEEEE;
font-size: 16px;
}
body {
height: 100% !important;
width: 100% !important;
}
a {
text-decoration: none;
color: #002173;
}
h1 {
font-family: 'Nunito Sans', Helvetica, Arial;
}
.cus-pad {
padding-left: 20px;
padding-right: 20px;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass span,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
#outlook a {
padding: 0;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
img {
-ms-interpolation-mode: bicubic;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
/*no linky*/
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.link-hover:hover {
text-decoration: none !important;
}
table {
border-collapse: collapse;
margin: 0 auto;
padding: 20px;
}
.button:hover {
background-color: #ffd251 !important;
}
.button-2:hover {
background-color: #777671 !important;
}
tr.social-link td a img {
height: 20px;
width: auto;
}
@media only screen and (max-width: 481px) {
/**generic styles for content added through editor**/
table {
width: auto !important;
}
td {
display: block;
margin: 0 auto;
width: auto !important;
}
/**all tds added to template will wrap!**/
img {
float: none !important;
display: block;
padding: 0;
max-width: 100%;
height: auto !important;
}
/****/
.container {
padding: 0 !important;
}
.no-wrap {
width: 100% !important;
}
table.no-wrap td {
/**add class no-wrap to table to keep it from wrapping**/
display: table-cell !important;
}
table[class="resp"] {
width: auto !important;
padding: 5px !important;
}
.main-content-area {
-webkit-text-size-adjust: 90% !important;
line-height: 21px;
text-align: left;
}
.promo-code {
padding: 20px !important;
}
td[class="main-content-area"] h2 {
-webkit-text-size-adjust: 80% !important;
}
td[class="force-col"] {
/**add this class to any td you'd like to wrap in a one-column layout**/
display: block;
margin: 0 auto;
width: auto !important;
padding: 0;
}
img {
max-width: 100% !important;
height: auto !important;
}
/**hide content**/
*[class="hide-me"] {
display: none !important;
}
img[class="show-img"] {
display: block !important;
padding-top: 10px;
max-height: none !important;
width: auto !important;
height: auto !important;
}
}
.gf-e-header td a {
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}
</style>
</head>
<body style="background-color: #eeeeee;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 30px">
<tr>
<td class="container" style="" width="100%">
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="resp" width="600">
<tbody>
<tr>
<td class="cus-pad" style="padding-top: 20px">
<table align="left">
<tr class="gf-e-header">
<td class="gf-e-header">
<div style="float: left">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="130" />
</a>
</div>
</td>
<td valign="middle" align="right">
<a href="">Company</a>
<a href="">Services</a>
<a href="">Locations</a>
<a href="">Resources</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-bottom: 25px;padding-top: 20px;padding-right: 20px;padding-left: 20px;">
<div style="border:1px solid #002173"></div>
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">General information</h1>
<p style="color:#454545">The following information will provide you with an easy to navigate overview of what will happen with your personal data when you visit our website. The term „personal data“ comprises all data that can be used to personally identify you.
For detailed information about the subject matter of data protection, please consult our Data Protection Declaration, which we have included beneath this copy.</p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#FFFfFF" class="hero cus-pad">
<img src="https://i.imgur.com/f1OWoqx.jpg" width="560px" />
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">Data recording on our website</h1>
<h4 style="color:#454545">Who is the responsible party for the recording of data on this website (i.e. the„controller“)?
</h4>
</td>
</tr>
<tr>
<td align="left" class="main-content-area cus-pad"><span style="font-size: 15px; color:#454545">The data on this website is processed by the operator of the website, whose contact
information is available under section „Information Required by Law“ on this website.</span>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom: 50px;padding-top:10px;">
<div>
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
href="http://" style="height:40px;v-text-anchor:middle;width:150px;" stroke="f"
fillcolor="#70002c">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://" style="background-color:#70002c;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;">Learn
More</a>
<!--[if mso]>
</center>
</v:rect>
<![endif]-->
</div>
</td>
</tr>
<tr>
<td class="cus-pad" style="padding-top: 40px;padding-bottom:40px">
<div style="border:1px solid #002173;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 0">
<table border="0" cellpadding="0" cellspacing="0" class="resp" style="background: #FFFFFF; padding-left: 15px; padding-right: 15px;" width="600">
<tbody>
<tr>
<td align="right" style="padding: 0 0 0px 15px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="padding: 0 0 30px 0;">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="100" />
</a>
</td>
</tr>
<tr class="social-link">
<td align="center" style="padding-bottom: 30px;">
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/gWSZvGP.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/cCgx01J.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/HKXV4wh.png" alt="">
</a>
<a href="">
<img height="18px" src="https://i.imgur.com/Akw0TqM.png" alt="">
</a>
</td>
</tr>
<tr>
<td style=" color:#6C6C6C; font-size:14px;padding-bottom: 30px;">
<a style="color:#6C6C6C; border-right: 1px solid #6C6C6C; padding-right: 12px;font-weight: bold;line-height: 14px" href="">Privacy Policy</a>
<a style="color:#6C6C6C; padding-left: 10px;font-weight: bold; line-height: 14px " href="">Terms of
services</a>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr align="center">
<td style="padding-bottom: 30px;font-size: 10px">
This email was sent to <a href="">example@gmail.com</a> <br/> © 2004-2020 All rights reserved - Global Fairways®
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<br clear="all" />
</body>
</html>
并且响应式链接将在徽标之后下降。
首先你的代码很乱，我过滤了一些。我使用 display:grid; 解决了你的问题，将 header 徽标和导航容器都给了它们 1fr ，这样它们就可以均匀地使用 space ，
body {
font-family: 'Nunito Sans', Helvetica, Arial;
margin: 0 !important;
padding: 0 !important;
text-size-adjust: none !important;
-ms-text-size-adjust: none !important;
-webkit-text-size-adjust: none !important;
-webkit-font-smoothing: antialiased;
background-color: #EEEEEE;
font-size: 16px;
}
body {
height: 100% !important;
width: 100% !important;
}
a {
text-decoration: none;
color: #002173;
}
h1 {
font-family: 'Nunito Sans', Helvetica, Arial;
}
.cus-pad {
padding-left: 20px;
padding-right: 20px;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass span,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
#outlook a {
padding: 0;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
img {
-ms-interpolation-mode: bicubic;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
/*no linky*/
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.link-hover:hover {
text-decoration: none !important;
}
table {
border-collapse: collapse;
margin: 0 auto;
padding: 20px;
}
.button:hover {
background-color: #ffd251 !important;
}
.button-2:hover {
background-color: #777671 !important;
}
tr.social-link td a img {
height: 20px;
width: auto;
}
@media only screen and (max-width: 481px) {
/**generic styles for content added through editor**/
table {
width: auto !important;
}
td {
display: block;
margin: 0 auto;
width: auto !important;
}
/**all tds added to template will wrap!**/
img {
float: none !important;
display: block;
padding: 0;
max-width: 100%;
height: auto !important;
}
/****/
.container {
padding: 0 !important;
}
.no-wrap {
width: 100% !important;
}
table.no-wrap td {
/**add class no-wrap to table to keep it from wrapping**/
display: table-cell !important;
}
table[class="resp"] {
width: auto !important;
padding: 5px !important;
}
.main-content-area {
-webkit-text-size-adjust: 90% !important;
line-height: 21px;
text-align: left;
}
.promo-code {
padding: 20px !important;
}
td[class="main-content-area"] h2 {
-webkit-text-size-adjust: 80% !important;
}
td[class="force-col"] {
/**add this class to any td you'd like to wrap in a one-column layout**/
display: block;
margin: 0 auto;
width: auto !important;
padding: 0;
}
img {
max-width: 100% !important;
height: auto !important;
}
/**hide content**/
*[class="hide-me"] {
display: none !important;
}
img[class="show-img"] {
display: block !important;
padding-top: 10px;
max-height: none !important;
width: auto !important;
height: auto !important;
}
}
.header-top{
display:grid;
grid-template-columns:1fr 1fr;
place-items:center;
padding: 30px;
}
.header-top .logo{
justify-self:left;
}
.header-top .nav{
text-align:right;
display:flex;
flex-direction:row;
justify-content: right;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" style="" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<!--xmlns fix Outlook Scaling-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Fix Outlook Scaling-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700|Nunito+Sans:300,400,600,700,900"
id="google-fonts-css" media="all" rel="stylesheet" type="text/css" />
<title></title>
<!--[if mso]>
<style type="text/css">
body, table, td {
font-family: Arial, Helvetica, sans-serif !important;
}
</style>
<![endif]-->
</head>
<body style="background-color: #eeeeee;">
<table cellpadding="0" cellspacing="0" width="100%" style="margin-top: 30px">
<tr>
<td class="container" width="100%">
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="resp" width="600">
<tbody>
<tr>
<td>
<div class="header-top">
<a class="logo" href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F"
target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="130" />
</a>
<div class="nav">
<a href="">Company</a>
<a href="">Services</a>
<a href="">Locations</a>
<a href="">Resources</a>
</div>
</div>
</td>
</tr>
<tr>
<td style="padding-bottom: 25px;padding-top: 20px;padding-right: 20px;padding-left: 20px;">
<div style="border:1px solid #002173"></div>
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">General information</h1>
<p style="color:#454545">The following information will provide you with an easy to
navigate overview of what will happen with your personal data when you visit our
website. The term „personal data“ comprises all data that can be used to personally
identify you.
For detailed information about the subject matter of data protection, please consult
our Data Protection Declaration, which we have included beneath this copy.</p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#FFFfFF" class="hero cus-pad">
<img src="https://i.imgur.com/f1OWoqx.jpg" width="560px" />
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">Data recording on our website</h1>
<h4 style="color:#454545">Who is the responsible party for the recording of data on this
website (i.e. the„controller“)?
</h4>
</td>
</tr>
<tr>
<td align="left" class="main-content-area cus-pad"><span
style="font-size: 15px; color:#454545">The data on this website is processed by the
operator of the website, whose contact
information is available under section „Information Required by Law“ on this
website.</span>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom: 50px;padding-top:10px;">
<div>
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
href="http://" style="height:40px;v-text-anchor:middle;width:150px;" stroke="f"
fillcolor="#70002c">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://"
style="background-color:#70002c;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;">Learn
More</a>
<!--[if mso]>
</center>
</v:rect>
<![endif]-->
</div>
</td>
</tr>
<tr>
<td class="cus-pad" style="padding-top: 40px;padding-bottom:40px">
<div style="border:1px solid #002173;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 0">
<table border="0" cellpadding="0" cellspacing="0" class="resp"
style="background: #FFFFFF; padding-left: 15px; padding-right: 15px;" width="600">
<tbody>
<tr>
<td align="right" style="padding: 0 0 0px 15px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="padding: 0 0 30px 0;">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F"
target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="100" />
</a>
</td>
</tr>
<tr class="social-link">
<td align="center" style="padding-bottom: 30px;">
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/gWSZvGP.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/cCgx01J.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/HKXV4wh.png" alt="">
</a>
<a href="">
<img height="18px" src="https://i.imgur.com/Akw0TqM.png" alt="">
</a>
</td>
</tr>
<tr>
<td style=" color:#6C6C6C; font-size:14px;padding-bottom: 30px;">
<a style="color:#6C6C6C; border-right: 1px solid #6C6C6C; padding-right: 12px;font-weight: bold;line-height: 14px"
href="">Privacy Policy</a>
<a style="color:#6C6C6C; padding-left: 10px;font-weight: bold; line-height: 14px "
href="">Terms of
services</a>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr align="center">
<td style="padding-bottom: 30px;font-size: 10px">
This email was sent to <a href="">example@gmail.com</a> <br /> ©
2004-2020 All rights reserved - Global Fairways®
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<br clear="all" />
</body>
</html>
您的 header 目前没有占据电子邮件的全部宽度，因此请先将 width:100%; 添加到此元素。接下来，只需将 text-align:right; 或 align="right" 添加到导航部分。见下文：
<table align="left" style="width: 100%;">
<tbody>
<tr class="gf-e-header">
<td class="gf-e-header">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="130">
</a>
</td>
<td style="text-align: right;">
<a href="">Company</a>
<a href="">Services</a>
<a href="">Locations</a>
<a href="">Resources</a>
</td>
</tr>
</tbody>
</table>
您在 td 标签内使用了 table。因此，当您正确对齐列表项时，它不起作用。我更新了那部分请仔细阅读并在您的代码中更新它..快乐编码！我只是将列表项放在另一个 div.
中<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" style="" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<!--xmlns fix Outlook Scaling-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Fix Outlook Scaling-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700|Nunito+Sans:300,400,600,700,900" id="google-fonts-css" media="all" rel="stylesheet" type="text/css" />
<title></title>
<!--[if mso]>
<style type="text/css">
body, table, td {
font-family: Arial, Helvetica, sans-serif !important;
}
</style>
<![endif]-->
<style type="text/css">
html,
body {
font-family: 'Nunito Sans', Helvetica, Arial;
margin: 0 !important;
padding: 0 !important;
text-size-adjust: none !important;
-ms-text-size-adjust: none !important;
-webkit-text-size-adjust: none !important;
-webkit-font-smoothing: antialiased;
background-color: #EEEEEE;
font-size: 16px;
}
body {
height: 100% !important;
width: 100% !important;
}
a {
text-decoration: none;
color: #002173;
}
h1 {
font-family: 'Nunito Sans', Helvetica, Arial;
}
.cus-pad {
padding-left: 20px;
padding-right: 20px;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass span,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
#outlook a {
padding: 0;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
img {
-ms-interpolation-mode: bicubic;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
/*no linky*/
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.link-hover:hover {
text-decoration: none !important;
}
table {
border-collapse: collapse;
margin: 0 auto;
padding: 20px;
}
.button:hover {
background-color: #ffd251 !important;
}
.button-2:hover {
background-color: #777671 !important;
}
tr.social-link td a img {
height: 20px;
width: auto;
}
@media only screen and (max-width: 481px) {
/**generic styles for content added through editor**/
table {
width: auto !important;
}
td {
display: block;
margin: 0 auto;
width: auto !important;
}
/**all tds added to template will wrap!**/
img {
float: none !important;
display: block;
padding: 0;
max-width: 100%;
height: auto !important;
}
/****/
.container {
padding: 0 !important;
}
.no-wrap {
width: 100% !important;
}
table.no-wrap td {
/**add class no-wrap to table to keep it from wrapping**/
display: table-cell !important;
}
table[class="resp"] {
width: auto !important;
padding: 5px !important;
}
.main-content-area {
-webkit-text-size-adjust: 90% !important;
line-height: 21px;
text-align: left;
}
.promo-code {
padding: 20px !important;
}
td[class="main-content-area"] h2 {
-webkit-text-size-adjust: 80% !important;
}
td[class="force-col"] {
/**add this class to any td you'd like to wrap in a one-column layout**/
display: block;
margin: 0 auto;
width: auto !important;
padding: 0;
}
img {
max-width: 100% !important;
height: auto !important;
}
/**hide content**/
*[class="hide-me"] {
display: none !important;
}
img[class="show-img"] {
display: block !important;
padding-top: 10px;
max-height: none !important;
width: auto !important;
height: auto !important;
}
}
.gf-e-header td a {
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}
</style>
</head>
<body style="background-color: #eeeeee;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 30px">
<tr>
<td class="container" style="" width="100%">
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="resp" width="600">
<tbody>
<tr>
<td class="cus-pad" style="padding-top: 20px">
<div style="float: left">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="130" />
</a>
</div>
<div style="float:right;">
<a href="">Company</a>
<a href="">Services</a>
<a href="">Locations</a>
<a href="">Resources</a>
</div>
</td>
</tr>
<tr>
<td style="padding-bottom: 25px;padding-top: 20px;padding-right: 20px;padding-left: 20px;">
<div style="border:1px solid #002173"></div>
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">General information</h1>
<p style="color:#454545">The following information will provide you with an easy to navigate overview of what will happen with your personal data when you visit our website. The term „personal data“ comprises all data that can be used to personally identify you.
For detailed information about the subject matter of data protection, please consult our Data Protection Declaration, which we have included beneath this copy.</p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#FFFfFF" class="hero cus-pad">
<img src="https://i.imgur.com/f1OWoqx.jpg" width="560px" />
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">Data recording on our website</h1>
<h4 style="color:#454545">Who is the responsible party for the recording of data on this website (i.e. the„controller“)?
</h4>
</td>
</tr>
<tr>
<td align="left" class="main-content-area cus-pad"><span style="font-size: 15px; color:#454545">The data on this website is processed by the operator of the website, whose contact
information is available under section „Information Required by Law“ on this website.</span>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom: 50px;padding-top:10px;">
<div>
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
href="http://" style="height:40px;v-text-anchor:middle;width:150px;" stroke="f"
fillcolor="#70002c">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://" style="background-color:#70002c;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;">Learn
More</a>
<!--[if mso]>
</center>
</v:rect>
<![endif]-->
</div>
</td>
</tr>
<tr>
<td class="cus-pad" style="padding-top: 40px;padding-bottom:40px">
<div style="border:1px solid #002173;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 0">
<table border="0" cellpadding="0" cellspacing="0" class="resp" style="background: #FFFFFF; padding-left: 15px; padding-right: 15px;" width="600">
<tbody>
<tr>
<td align="right" style="padding: 0 0 0px 15px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="padding: 0 0 30px 0;">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="100" />
</a>
</td>
</tr>
<tr class="social-link">
<td align="center" style="padding-bottom: 30px;">
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/gWSZvGP.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/cCgx01J.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/HKXV4wh.png" alt="">
</a>
<a href="">
<img height="18px" src="https://i.imgur.com/Akw0TqM.png" alt="">
</a>
</td>
</tr>
<tr>
<td style=" color:#6C6C6C; font-size:14px;padding-bottom: 30px;">
<a style="color:#6C6C6C; border-right: 1px solid #6C6C6C; padding-right: 12px;font-weight: bold;line-height: 14px" href="">Privacy Policy</a>
<a style="color:#6C6C6C; padding-left: 10px;font-weight: bold; line-height: 14px " href="">Terms of
services</a>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr align="center">
<td style="padding-bottom: 30px;font-size: 10px">
This email was sent to <a href="">example@gmail.com</a> <br/> © 2004-2020 All rights reserved - Global Fairways®
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<br clear="all" />
</body>
</html>
您可以将 valign="middle" 属性更改为 align="center" 并将 height="70px" 添加到导航 table。有更好的选择，但我认为它可以满足您的需求。
<table align="right" width="70%" height="70px">
<tbody>
<tr align="center">
<td>
<a href="">Company</a>
<a href="">Services</a>
<a href="">Locations</a>
<a href="">Resources</a>
</td>
</tr>
</tbody>
</table>