Question

   <style>
   body{
       margin:0;
       padding:0;
      }
    #module_footerLink li{
        float:left;
        list-style:none;
        margin:0 5px;
    }
    .clear{
        clear:both;
    }
    .wrap{
        border:1px solid #ccc;
        width:900px;
            text-align:center;
    }
    </style>
<body>
<div class="wrap">
    <ul id="module_footerLink">
      <li><a id="id_home" href="home"><span>Home</span></a></li>
      <li><a id="id_the_resort" href="article-AboutUs"><span>The Resort</span></a> </li>
      <li><a id="id_facilities" href="article-facilities"><span>Facilities</span></a></li>
      <li><a id="id_tariff" href="article-tariff"><span>Tariff</span></a></li>
      <li><a id="id_media" href="article-media"><span>Media</span></a></li>
      <li><a id="id_links" href="article-links"><span>Links</span></a></li>
      <li><a id="id_contact_us" href="contact"><span>Contact Us</span></a></li>
       <li class="clear"></li>
    </ul>
    <div class="clear"></div>
    </div>
</body>

这里我希望li在div的中间，其类是wrap。有人知道我该怎么办？我试过中心对齐，但它不起作用...............

Answer 1

body{
       margin:0;
       padding:0;
      }
    #module_footerLink li{
    display: inline-block;
        list-style:none;
        margin:0 5px;
        /* For IE 7 */
        zoom: 1;
        *display: inline;
    }
    .clear{
        clear:both;
    }
    .wrap{
        border:1px solid #ccc;
        width:900px;
            text-align:center;
    }

Answer 2

查看更新后的css： -

<style>
body {
margin: 0;
padding: 0;
}


#module_footerLink {
margin:auto;
width:450px;
}

#module_footerLink li {
float: left;
list-style: none;
margin: 0 5px;
background:red;
}

.clear {
clear: both;
}

.wrap {
border: 1px solid #ccc;
width: 900px;
text-align: center;
background:blue;
}

</style>

我认为你看起来像这样： - http://jsfiddle.net/eHyuZ/2/

<强>已更新

现在你可以根据你的要求添加li了...它实际上你的方法不会正确，这就是为什么你现在面临问题我已经做了一些改变，并以适当的方式导航< / p>

查看更新后的链接： http://jsfiddle.net/eHyuZ/7/

Answer 3

你必须使用保证金：0自动;

.wrap{
    border:1px solid #ccc;
    width:900px;
    margin:0 auto;
    text-align:center;
}

http://www.w3schools.com/css/css_align.asp

Answer 4

comment

编辑

尝试添加

#module_footerLink {
display:inline-block;
/*IE7*/
zoom:1;
*display:inline;
}

http://jsfiddle.net/DEmTh/1/

但是在IE7中它无法正常工作

需要中心对齐ul的<li>是左浮动</li>

4 个答案: