为什么我的无序列表不能正确居中？

它似乎试图居中，但实际上是几个像素关闭。这真的很烦人。为什么我的无序列表不能正确居中？

图片：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

为什么我的无序列表不能正确居中？

回答

相关问题