這些李爲什麼不是中心？

我想讓這些列表項目居中列表中，但我似乎無法弄清楚問題所在。下面的代碼：這些李爲什麼不是中心？

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link href="my.css" rel="stylesheet" type="text/css"> 
</head> 
    <body> 
     <div id="centerDiv"> 
      <ul class="centerUL"> 
       <li><a href="http://www.amazon.com">Amazon 1</a></li> 
       <li><a href="http://www.amazon.com">Amazon 2</a></li> 
       <li><a href="http://www.amazon.com">Amazon 3</a></li> 
      </ul> 
     </div>  
    </body> 
</html>

CSS

#centerDiv { 
    width: 330px; 
    text-align: center; 
    border: 1px solid red; 
} 
.centerUL { 
    width: 70%; 
    margin: 2px auto; 
    line-height: 1.4; 
    border: 1px solid green; 
} 
li { 
    display: inline; 
    text-align: center; 
    border: 1px solid orange; 
}

來源

2013-11-27 Conrad

如果你不使用CSS復位，你應該。 http://www.cssreset.com/

CSS復位將標準化你的元素，讓你知道他們將如何行事;他們期望什麼。

默認情況下，ul S和ol旨意有一個左填充上他們，因爲子彈:)

http://jsfiddle.net/MXGz5/

.centerUL { 
    width: 70%; 
    margin: 2px auto; 
    padding: 0; /* this new line */ 
    line-height: 1.4; 
    border: 1px solid green; 
}

... ixes問題。

來源

2013-11-27 02:42:35 Ming

最好的解決方案是將text-align:center;用於ul元素，並將display:inline-block;用於li元素。

ul{ 
text-align:center; 
} 
ul li{ 
display:inline-block; 
}

DEMO

來源

2013-11-27 02:52:04

這並不居中在列表中的列表中的項目 - 在'填充：0;'是必要的，如上面提到的。 – Conrad

這些李爲什麼不是中心？

回答

相關問題