Центр неупорядоченного списка в div с <br>в - PullRequest
Новая
       1

Центр неупорядоченного списка в div с <br>в

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

Есть много похожих вопросов, но ни один не соответствует моему случаю, в основном потому, что у меня есть тег <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>

Спасибо.

Ответы [ 2 ]

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

Вы можете использовать тот же макет, не меняя его на таблицу и изменяя только стиль: 

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

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

Используйте стол, поместите два <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-письма.

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

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

...