DIV UL内容不以UL为中心

Question

我正在为客户发送一封电子邮件，这个列表/表让我难过。这是视觉显示。

正如您所看到的，我基本上有3列，每列都由一个单独的<ul>组成。问题是它们与上面的<h3>不一致。当我点击DW实时视图中的<ul>时，我可以看到内容是右对齐的。

.navlist {
  background-color: #99a6b1;
  height: 400px;
  padding-top: 50px;
}
.navlist ul {
  display: inline-table;
  margin: 0 auto;
}
.navlist li {
  list-style-type: none;
  color: #ececed;
  font-size: 16px;
  padding-bottom: 10px;
  text-align: center;
}

<section>
  <div class="navlist" align="center">
    <h3 style="color: #ececed; padding-bottom: 20px;">Our Commitment</h3>
    <ul>
      <li>
        <img src="https://static1.squarespace.com/static/5756358501dbae2c96b689fe/t/5829efb69de4bb1fe2fd2a37/1479143354215/V3DG+Web+Icons-04.png?format=300w" alt "comprehensive services" height="150px">
      </li>
      <li>ComprehensivevServices</li>
    </ul>
    <ul>
      <li>
        <img src="https://static1.squarespace.com/static/5756358501dbae2c96b689fe/t/5829efc329687f358474b73a/1479143366452/V3DG+Web+Icons-05.png?format=300w" alt "Dependable Support" height="150px">
      </li>
      <li>Dependable Service</li>
    </ul>
    <ul>
      <li>
        <img src="https://static1.squarespace.com/static/5756358501dbae2c96b689fe/t/5829efd0414fb518a2c06557/1479143379620/?format=300w" alt "Easy To Work With" height="150px">
      </li>
      <li>Easy To Work With</li>
    </ul>
  </div>
</section>

我希望它按照它的方式排列。在此先感谢您的帮助。

Answer 1

您是否尝试删除'ul'的填充？

.navlist ul{
    display: inline-table;
    margin: 0 auto;
    padding-left: 0;
}

这将使您的内容更加集中。

Answer 2

将padding-left: 0添加到.navlist ul

为了保持li项之间的距离，你可以左右添加一些边距：

.navlist ul{
    display: inline-table;
    margin: 0 10px;
    padding-left: 0;
}

＆＃13;

＆＃13;

.navlist {
	background-color: #99a6b1;
	height: 400px;
	padding-top: 50px;
}
.navlist ul{
	display: inline-table;
	margin: 0 10px;
  padding-left: 0;
}
.navlist li {
list-style-type: none;
	color: #ececed;
	font-size: 16px;
	padding-bottom: 10px;
	text-align: center;
}

＆＃13;

<section>
		<div class="navlist" align="center">
			<h3 style="color: #ececed; padding-bottom: 20px;">Our Commitment</h3>
			<ul>
				<li><img src="https://static1.squarespace.com/static/5756358501dbae2c96b689fe/t/5829efb69de4bb1fe2fd2a37/1479143354215/V3DG+Web+Icons-04.png?format=300w" alt"comprehensive services" height="150px"></li>
				<li>ComprehensivevServices</li>
			</ul>
			<ul>
				<li><img src="https://static1.squarespace.com/static/5756358501dbae2c96b689fe/t/5829efc329687f358474b73a/1479143366452/V3DG+Web+Icons-05.png?format=300w" alt"Dependable Support" height="150px"></li>
				<li>Dependable Service</li>
			</ul>
			<ul>
				<li><img src="https://static1.squarespace.com/static/5756358501dbae2c96b689fe/t/5829efd0414fb518a2c06557/1479143379620/?format=300w" alt"Easy To Work With" height="150px"></li>
				<li>Easy To Work With</li>
			</ul>
		</div>
	</section>

＆＃13;

＆＃13;

＆＃13;