интервал между ячейками стола неравномерен - PullRequest
Новая
       0

интервал между ячейками стола неравномерен

0 голосов
/ 19 октября 2018

Я делаю шаблон электронной почты, поэтому я ограничен в использовании стиля линии.Проблема в том, что ссылки в социальных сетях внизу не станут красивыми и даже не будут удалены друг от друга.Это выглядит плохо.Как я могу заставить их иметь ровное пространство между ними?Спасибо

Вот скрипка, если вы сделаете представление шире, как в реальном письме, оно будет более заметным 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>

Ответы [ 4 ]

0 голосов
/ 19 октября 2018

Будьте ленивы, заставьте ваши изображения выполнять свою работу, сделав их шире и центрируйте логотипы как часть изображения: 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>

Программирование не требуется.

0 голосов
/ 19 октября 2018

Вы можете установить каждый на 20% в то время как первый и последний o 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>
0 голосов
/ 19 октября 2018

Вы установили таблицу на 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

0 голосов
/ 19 октября 2018 
   <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>

попробуйте с этим ..

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...