DIV UL内容未集中在UL中

我正在为客户端发送电子邮件，此列表/表格让我难住。这里是视觉展示。DIV UL内容未集中在UL中

正如你所看到的，我基本上有3列，每一个被独立<ul>制成。问题是它们不符合上述的<h3>。当我点击DW的实时视图中的<ul>时，我可以看到内容是右对齐的。

right-aligned li content within 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>

我只是想它来排队的方式应该。在此先感谢您的帮助。

来源

2016-11-14 Alex Bradley

我可以问你为什么正在使用此布局的列表？ –

[列表显示稍微偏离中心]可能的重复（http://stackoverflow.com/questions/8622498/list-displaying-slightly-off-centered） – TylerH

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

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

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

来源

2016-11-14 19:45:06

谢谢大卫！我尝试过这种方法，但它只是挤压所有靠近中心图像的内容，所以它们实际上并没有显示更接近中心的内容。 –

@AlexBradley这个答案_does_解决你的问题。但我相信你可能会对最左边的清单项目比最右边的清单项目更宽泛这一事实感到困惑，因此第二个清单项目并不完全在“我们的承诺”文本下。即使整个名单是。 –

解决方案是给所有三个列表项目相同的宽度。 –

添加padding-left: 0到.navlist ul

为了让李项之间的距离，你CA的裕左右：

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

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

<section> 
 
\t \t <div class="navlist" align="center"> 
 
\t \t \t <h3 style="color: #ececed; padding-bottom: 20px;">Our Commitment</h3> 
 
\t \t \t <ul> 
 
\t \t \t \t <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> 
 
\t \t \t \t <li>ComprehensivevServices</li> 
 
\t \t \t </ul> 
 
\t \t \t <ul> 
 
\t \t \t \t <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> 
 
\t \t \t \t <li>Dependable Service</li> 
 
\t \t \t </ul> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><img src="https://static1.squarespace.com/static/5756358501dbae2c96b689fe/t/5829efd0414fb518a2c06557/1479143379620/?format=300w" alt"Easy To Work With" height="150px"></li> 
 
\t \t \t \t <li>Easy To Work With</li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </section>

来源

2016-11-14 20:20:37 Johannes

DIV UL内容未集中在UL中

回答

相关问题