我正在制作一个电子邮件模板，因此我只能使用行内样式。问题是底部的社交媒体链接不会很好，甚至彼此之间的距离也不大。看起来很糟糕。我怎样才能让他们之间有均匀的空间？谢谢
这是一个 fiddle ，如果你像在实际电子邮件中一样使 View 更宽，它会更引人注目 https://jsfiddle.net/89mnshyt/2/
<!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="/"><img style="display: block; margin: auto;max-width: 300px;" src=""> </a> </div><br>
<div>It was a pleasure doing business with you. 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;"><a href="" target="_blank"><img src="https://i.imgur.com/jmH8Emc.jpg"><br> Google</a></td>
<td style="text-align: center;"><a href="" target="_blank"><img src="https://i.imgur.com/2UcUbJB.png" ><br> Yelp</a></td>
<td style="text-align: center;"><a href="" target="_blank"><img src="https://i.imgur.com/1ngaDhv.png" ><br> Facebook </a></td>
<td style="text-align: center;"><a href="" target="_blank"><img src="https://i.imgur.com/y8BXkoK.jpg"><br> Car Gurus</a></td>
<td width="25%"></td>
</tr>
</tbody>
</table>
</body>
</html>最佳答案
您可以将每个设置为 20%，而第一个和最后一个设置为 10%，或者在整体上使用居中对齐 <tr>
<!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="/"><img style="display: block; margin: auto;max-width: 300px;" src=""> </a> </div><br>
<div>It was a pleasure doing business with you. 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 style="width:10%;"></td>
<td style="text-align: center; width:20%"><a href="" target="_blank"><img src="https://i.imgur.com/jmH8Emc.jpg"><br> Google</a></td>
<td style="text-align: center; width:20%"><a href="" target="_blank"><img src="https://i.imgur.com/2UcUbJB.png" ><br> Yelp</a></td>
<td style="text-align: center; width:20%"><a href="" target="_blank"><img src="https://i.imgur.com/1ngaDhv.png" ><br> Facebook </a></td>
<td style="text-align: center; width:20%"><a href="" target="_blank"><img src="https://i.imgur.com/y8BXkoK.jpg"><br> Car Gurus</a></td>
<td style="width:10%;"></td>
</tr>
</tbody>
</table>
</body>
</html>关于css - 表格单元格间距不均匀，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52893441/