时间戳

首页 > 解决方案 > 表格单元格间距不均匀

css - 表格单元格间距不均匀

问题描述

我正在制作一个电子邮件模板，因此我仅限于使用行内样式。问题是底部的社交媒体链接不会变得很好，甚至彼此之间会保持距离。看起来很糟糕。我怎样才能让它们之间有均匀的空间？谢谢

这是一个小提琴，如果你让视图更宽，就像在实际电子邮件中一样，它会更明显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>

标签： csshtml

解决方案

您已将表格设置为 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

推荐阅读