Question

有很多类似的问题，但没有一个完全符合我的情况，主要是因为列表中有<br>标签。我需要电子邮件模板的代码，因此无法使用引导程序或类似的程序。

我只需要在底部将社交媒体链接居中，以使它们位于页面中心，并保持响应速度即可。这是一个小提琴 https://jsfiddle.net/w5dtvs9h/

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="font-family: Arial;">
    <div style="max-width: 80%; margin: auto;">
    <div style="max-width: 100%; margin: auto;">
<a href="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"><img style="display: block; margin: auto;" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"> </a> </div>
<div>Your thoughts mean a lot to us. Your reviews help us learn what we are doing well, what we need to work on, and what we can do to make your experience with Our Company even better. </div>

<div> <span style="font-weight: bold;">Step 1: Follow the links or any (OR ALL!) of the review sites below </span><br><br> 
Click the buttons below to go to that site and provide your review.</div>

<div><span style="font-weight: bold;">Give us a rating and review. </span> <br><br>
Choose a star rating and provide your comments.</div>
<h3 style="text-align: center;">THANK YOU!</h3>
<hr>

<div style="width: 100%; margin: auto;">
    <ul style="margin: auto; width: 100%;">
        <li style="float: left; list-style:none; margin: auto; margin-right:5%; "><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="max-width: 50px; max-height: 50px;display: block; margin: auto;"><br> Google</li>
        <li style="float: left; list-style:none; margin: auto; margin-right:5%; "><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="max-width: 50px; max-height: 50px;display: block; margin: auto;"><br> Google</li>
        <li style="float: left; list-style:none; margin: auto; margin-right:5%; "><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="max-width: 50px; max-height: 50px;display: block; margin: auto;"><br> Google</li>
    </ul>
</div>
</div>
</body>
</html>

谢谢。

Answer 1

使用一张桌子，将两个<td>和width:20%;放在侧面，并为所有text-align:center;设置，例如：https://jsfiddle.net/w5dtvs9h/5/

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="font-family: Arial;">
	<div style="max-width: 80%; margin: auto;">
	<div style="max-width: 100%; margin: auto;">
<a href="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"><img style="display: block; margin: auto;" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"> </a> </div>
<div>Your thoughts mean a lot to us. Your reviews help us learn what we are doing well, what we need to work on, and what we can do to make your experience with Our Company even better. </div>

<div> <span style="font-weight: bold;">Step 1: Follow the links or any (OR ALL!) of the review sites below </span><br><br> 
Click the buttons below to go to that site and provide your review.</div>

<div><span style="font-weight: bold;">Give us a rating and review. </span> <br><br>
Choose a star rating and provide your comments.</div>
<h3 style="text-align: center;">THANK YOU!</h3>
<hr>

<table width="100%">
<tbody>
<tr>
<td width="20%"></td>
  <td style="text-align:center;">
  <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="max-width: 50px; max-height: 50px;display: block; margin: auto;"><br> Google
  </td>
  <td style="text-align:center;"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="max-width: 50px; max-height: 50px;display: block; margin: auto;"><br> Google</td>
  <td style="text-align:center;"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="max-width: 50px; max-height: 50px;display: block; margin: auto;"><br> Google</td>
  <td width="20%"></td>
</tr>
</tbody>
</table>

</div>
</body>
</html>

此外，使用表格，您可以安全使用html电子邮件。

Answer 2

您可以使用相同的布局，而无需将其更改为表格，而只需更改样式：

<div>
<ul style="margin: auto;display: flex;justify-content: center;">
    <li style="list-style:none;margin-right:5%;"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="max-width: 50px; max-height: 50px;display: block; margin: auto;"><br> Google</li>
    <li style="list-style:none;margin-right:5%;"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="max-width: 50px; max-height: 50px;display: block; margin: auto;"><br> Google</li>
    <li style="list-style:none;margin-right:5%;"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="max-width: 50px; max-height: 50px;display: block; margin: auto;"><br> Google</li>
</ul> 
</div>

https://jsfiddle.net/w5dtvs9h/6/

在

2 个答案: