Question

我正在制作电子邮件模板，因此只能使用行样式。问题在于，底部的社交媒体链接不会变得很好，甚至彼此之间的距离也不远。看起来不好如何使它们之间有均匀的空间？谢谢

这是一个小提琴，如果您像实际电子邮件中那样放大视图，则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>

Answer 1

   <tr align="center">
        <td width="10" style="width:10px"></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="10" style="width:10px"></td>
   </tr>

尝试一下。

Answer 2

您可以将每一个设置为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>

Answer 3

您已将表格设置为100％，但是各个元素没有指定的宽度。您可以这样做：

<!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="text-align: center;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="text-align: center;width:10%"></td>

    </tr>
</tbody>
</table>

</body>
</html>

我怀疑这个人的宽度为20％，并且在两端都添加了10％的间隔物，因为我怀疑您尝试这样做。

此处的示例：https://jsbin.com/qoxabac/edit?html,output

Answer 4

要懒惰，通过使图像变宽并使徽标居中作为图像的一部分来使图像起作用： https://jsfiddle.net/doc75ghq/

<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>

无需编程。

表单元间距不均匀

4 个答案: