0
   <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 位于类为 wrap 的 div 中间。有谁知道我该怎么做?我试过中心对齐,但它不起作用......

4

4 回答 4

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;
    }​
于 2012-04-06T11:14:37.870 回答
1

查看更新的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 ......它不会去任何地方实际上你的方法是不正确的,这就是为什么你现在面临问题我已经做了一些改变并以正确的方式使其导航

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

于 2012-04-06T11:57:25.590 回答
0

你必须使用 margin:0 auto;

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

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

于 2012-04-06T11:12:12.190 回答
0

评论编辑

尝试添加

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

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

但在 IE7 中它不起作用

于 2012-04-06T11:15:55.910 回答