Question

我有几个<li>项目居中并在<ul>代码中显示内联，但我似乎无法将<ul>本身置于页面的中心位置。您可以在此JSFiddle上看到轻微的缩进问题。

以下是列表的HTML：

<ul>
    <li><a href="/index.html" title="Home">Home</a></li> |
    <li><a href="/knowing.html" title="Knowing">Knowing</a></li> |
    <li><a href="/caring.html" title="Caring">Caring</a></li> |
    <li><a href="/working.html" title="Working">Working</a></li> |
    <li><a href="/living.html" title="Living">Living</a></li> |
    <li><a href="/opportunities.html" title="Opportunities">Opportunities</a></li> |
    <li><a href="/medicalservices.html" title="Medical Staff Services">Medical Staff Services</a></li>
    <br> asdf &copy; 2014
</ul>

这是CSS：

body {  
    font-size: 75%; /* Base browser font size is 14px */
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
    text-align: center;
    margin: 0 auto;
    width: 75%;
    clear: both;
}

a, a:link, a:hover, a:active, a:visited {
    text-decoration: none;
}

ul {
    margin: 0 auto;
}

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

.footer a:link, .footer a:visited, .footer a:active, .footer a:hover, {
    text-align: center;
    color: #cccccc;
}

令人讨厌的是，如果我从HTML中删除<ul>标签，则列表会居中，但这是不正确的标记，并且可能存在危险/问题。

我已经尝试了类似问题的其他一些建议，例如将width: 100%;与position: relative;放在一起的容器div，将<ul> div放置在左侧并将其向左浮动50％，然后将<li>项目放置并将它们向右浮动50％，但这对于我在每个|项目之间的<li>分隔符不起作用。< / p>

我的标记在某种程度上仍然不正确吗？我是否有一些冲突的CSS值阻止它工作？ <ul>列表总是缩进，无论如何？

编辑：直接在帖子中添加了CSS代码。

Answer 1

<ul>元素的默认填充左侧为40px。请使用padding: 0;或padding-left: 0;删除它。

<强> JSFiddle Example

您可以使用浏览器的F12开发人员工具来检查元素及其边距或填充。

Answer 2

看看这个例子，它水平居中于菜单项没有设置宽度的列表见这里：http://www.cssplay.co.uk/menus/centered.html

您需要的基本CSS：

footer {
  clear: both;
  float: left;
  overflow: hidden;
  width: 100%;
}
ul {
   float: left;
   left: 50%;
   list-style-type: none;
   margin: 0 auto;
   padding: 0;
   position: relative;
}
li {
  float: left;
  position: relative;
  right: 50%;
}

注意：我特意删除了| LI之间的分隔符，因为这不是有效的HTML。请参阅更改的示例：http://jsfiddle.net/eNQyp/1/分隔符作为样式添加到LI上。它可以使用这种技术工作，并且是有效的HTML。

使用UL时无法将列表设为中心

2 个答案: