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>

Here I want li's in middle of div whose class is wrap. Do any one know how can i do that? I have tried center align but it does not work...............

4

4 に答える 4

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 に答える
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 に答える
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 に答える