居中列表內容

爲什麼我的列表內容不能完全集中在它的容器中？我用文本艾琳：中心在#nav DIV，但它好像它可能仍然服用子彈進去，即使我讓他們與列表樣式類型無形：無。我附上了截圖。居中列表內容

這裏的HTML：

<div id="nav"> 
    <h2>Sonnet Index</h2> 
    <ul> 
     <li><a href="#">Book #1</a></li> 
     <li><a href="#">Book #2</a></li> 
     <li><a href="#">Book #3</a></li> 
     <li><a href="#">Book #4</a></li> 
     <li><a href="#">Book #5</a></li> 
    </ul> 
</div>

CSS：

#nav { 
    background-color: #ACCCFF; 
    float: left; 
    width: 200px; 
    height: 410px; 
    text-align: center; 
} 

ul { 
    list-style-type: none; 
}

來源

2017-02-21 smontoro14

bydefault ul採取60px padding從左至右，你可以這樣做的設定padding-left:0。

ul { 
    padding-left: 0px; 
}

來源

2017-02-21 06:14:12

檢查你的代碼的元素後，左填充未設置爲0像素，因此它是對右移，所有你需要做的就是添加填充左：0像素; 這裏是fiddle和代碼以及

#nav { 
 
    background-color: #ACCCFF; 
 
    float: left; 
 
    width: 200px; 
 
    height: 410px; 
 
    text-align: center; 
 
} 
 

 
ul { 
 
    padding-left: 0px; 
 
    list-style-type: none; 
 
}

<div id="nav"> 
 
    <h2>Sonnet Index</h2> 
 
    <ul> 
 
     <li><a href="#">Book #1</a></li> 
 
     <li><a href="#">Book #2</a></li> 
 
     <li><a href="#">Book #3</a></li> 
 
     <li><a href="#">Book #4</a></li> 
 
     <li><a href="#">Book #5</a></li> 
 
    </ul> 
 
</div>

來源

2017-02-21 06:18:51 warl0ck

無序列表默認情況下，有一些填充，你可以在瀏覽器中檢查工具檢查。只是刪除填充。你的CSS就會像..

ul { 
    list-style-type: none; 
    padding-left:0px; 
}

來源

2017-02-21 06:22:28

爲什麼我的列表內容完全在其容器的中心？嗯，這是因爲你有not changed default properties of ul tag，他們是如下，

ul { 
display: block; 
list-style-type: disc; 
margin-top: 1em; 
margin-bottom: 1 em; 
margin-left: 0; 
margin-right: 0; 
padding-left: 40px; 
}

只要你改變它的padding:0你#nav text-align:center工作正常，並在中心對齊。

#nav { 
 
    background-color: #ACCCFF; 
 
    float: left; 
 
    width: 200px; 
 
    height: 410px; 
 
    text-align: center; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    padding:0px; /*Add this*/ 
 
}

<div id="nav"> 
 
    <h2>Sonnet Index</h2> 
 
    <ul> 
 
     <li><a href="#">Book #1</a></li> 
 
     <li><a href="#">Book #2</a></li> 
 
     <li><a href="#">Book #3</a></li> 
 
     <li><a href="#">Book #4</a></li> 
 
     <li><a href="#">Book #5</a></li> 
 
    </ul> 
 
</div>

來源

2017-02-21 07:06:55 frnt

@ smontoro14希望這個作品。 – frnt

居中列表內容

回答

相關問題