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中

回答

相關問題