爲什麼我的無序列表不能正確居中？

它似乎試圖居中，但實際上是幾個像素關閉。這真的很煩人。爲什麼我的無序列表不能正確居中？

圖片：http://i.imgur.com/X4jhf.png

我的代碼：

HTML：

<body> 
     <div class="menu-bar"> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Work</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 

     <div class="greeting"></div> 
    </body>

CSS：

.menu-bar { 
    font-family: 'Lucida Grande'; 
} 

.menu-bar ul { 
    text-align: center; 
    list-style-type: none; 
} 

.menu-bar li { 
    display: inline; 
} 

.greeting { 
    background: url('../media/pic.jpg'); 
    border: 1px solid black; 
    margin-top: 75px; 
    margin-left: auto; 
    margin-right: auto; 
    width: 500px; 
    height: 375px; 
}

非常沮喪。 > _ <

來源

2012-08-26 Doug Smith

您是否在代碼中的任何地方包含標準的reset.css文件？ –

Margin和Padding都需要設置爲0，除非您使用css reset來避免瀏覽器不一致。

.menu-bar ul { 
    text-align: center; 
    list-style-type: none; 
    margin:0; 
    padding:0; 
}

。

來源

2012-08-26 22:16:36

正是我在找的東西。也可以查看CSS重置。謝謝。 :) –

不客氣:-) –

從未見過謝赫和赫拉一起扔進去。名稱+1。 – Jawad

UL有默認的左邊距，您還沒有處理。只需添加邊距：0;

來源

2012-08-26 22:07:08 TomDunning

爲什麼我的無序列表不能正確居中？

回答

相關問題