灵活页面的定位菜单答案

【问题标题】：positioning menu for flexible page灵活页面的定位菜单
【发布时间】：2012-04-19 12:28:57
【问题描述】：

我正在设计一个居中的页面，但我的菜单并不完全居中。它有点靠近右侧。我不明白为什么会这样。你能帮忙吗？

感谢您的帮助。

CSS

body {

         margin-left: auto;
         margin-right: auto;
         text-align:center;
         background: #ffffff }

div.wrap {
         max-width:800px;
         min-width:400px;
         margin: 0px auto;
         border: 1px dashed red; }

div.inner-wrap {
         overflow: auto;        
         margin: 30px;
         border: 1px dashed #222; }
div.header {
        padding-top: 1pc;
        text-align:center;
        width:100%;
        color: #000000;}

     div.menu { 
        list-style:none; 
        margin:0; 
        padding:0; 
        width:100%;
        text-align:center;
        background:#FBB117;} 
     div.menu ul{ 
        margin-left: auto;
        margin-right: auto; 
        margin-top: 3px;
        margin-bottom: 3px;
        width: 100px 
        padding:0;
        display:inline-block;} 
     div.menu li{ 
        display:inline; } 
     div.menu li a{ 
        text-decoration:none; 
        padding:7px 0; 
        width:100px; 
        background:#FBB117; 
        color:#4C4646; 
        float:left; 
        text-align:center; }  
     div.menu li a:hover{ 
        background:#a2b3a1; 
        color:#000 } 

div.content {
         padding-top: 2pc;
         text-align:left;
         margin-left: 50px;
         margin-right: 50px;
         color: #000000 }

div.content p {
    color: #493831;
    padding-bottom: 30px;
    margin: 0;}

     div.sidebar {
         margin-right: 15%;
         padding-top: 2pc;
         text-align:center;
         float: right;
         width: 200px;
         color: #000000;
         list-style:none; }
     div.sidebar ul{
         margin-left: auto;
         margin-right: auto; 
         margin-top: 3px;
         margin-bottom: 3px;
         padding:0;
         list-style: none;
         display:inline-block;  }
     div.sidebar li{
         display:inline; }
     div.sidebar li a{ 
        text-decoration:none; 
        padding:10px 0; 
        width:100%; 
        background:#FBB117; 
        color:#4C4646; 
        float:right; 
        text-align:center; 
        border-bottom:1px solid #fff;}  
     div.sidebar li a:hover{ 
        background:#a2b3a1; 
        color:#000 }

HTML 代码在这里：

<body>
      <div class="wrap">
      <div class="inner wrap">
      <div class="header">
           <img src="realimg1.jpg" class="real" alt="king">
           <h1>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h1>
      </div>
      <div class="menu">
           <ul>

              <li><a href="link1.html">xx</a></li>
              <li><a href="link1.html">xxxx</a></li>
              <li><a href="link1.html">xxxxxxx</a></li>
              <li><a href="link1.html">xxxxxxxxx</a></li>
              <li><a href="link1.html">xx</a></li>
              <li><a href="link1.html">xxxxxx</a></li>

           </ul>
      </div>
      <div class="content">
          <p>
          <img src="img1.jpg" class="bw" alt="king">
          The CC is one of the oldest continually operating chess club in
          the Southern Hemisphere.We can proudly boast that we have been open daily since 1990 and we inted to
          maintain that tradition. On any night, you will find members of the club playing casual games or
          participating in one of our manly regulary scheduled tournaments. We are family club, and offer competition and
          instruction suitable for chess players of all skill levels and age groups.</p>
          <p>No other club in texas can boast a history so rich. Winning the club champion championships is your
          chance to get amongst these greats, and be immortalized foreve on the honow boards.</p>
          <p>Throughout the year,  Chess Club 'traditional time control' FIDE rated events form, whereby
          a player's scores from all 9 events will add up to form a grand prix score at the end of the year.The tournaments included are:
          Australia Day Weekender, Chess Club Championship,ANZAC Day Weekender, City Of Brisbane Open, Edwin Malitis Memorial, Chess Club Open , Chess Club Cup Weekender

      </div>
      <div class="sidebar">
           <ul>
           <li><a href="link1.html">xxx</a></li>
           <li><a href="link1.html">xxxxxxxxx</a></li>
           <li><a href="link1.html">xxxxxxx</a></li>
           <li><a href="link1.html">xxxxxx</a></li>
           <li><a href="link1.html">xxxxxxxxx</a></li>
           <li><a href="link1.html">xxxxxxxxxx</a></li>
           <li><a href="link1.html">xxxxxxxx</a></li>
           <li><a href="link1.html">xxxxx</a></li>
           <li><a href="link1.html">xxxx</a></li>
           <li><a href="link1.html">xxxxxxxxxxxx</a></li>
           <li><a href="link1.html">xxxxxxxx</a></li>
           </ul>
       </div>


      </div>
      </div>

   </body>

【问题讨论】：

我们需要对应的HTML代码。例如，请发布一个小提琴或一个在线页面的链接
我不知道如何保存小提琴并发送链接。我也添加了html代码。感谢您的帮助。
@pepsicode jsfiddle 中的save 按钮通常可以很好地保存。
小提琴代码jsfiddle.net/BpmUp

标签： html css menu positioning footer

【解决方案1】：

侧边栏边距 0 或 auto 并删除浮动，因为你想要这个中心

像这样

div.sidebar {

         padding-top: 2pc;
         text-align:center;

         width: 200px;
         color: #000000;
             list-style:none;
margin:0 auto;        
}

现场演示http://jsfiddle.net/rohitazad/wFQdj/

【讨论】：

认为@pepsicode 是在谈论页面顶部的主菜单，而不是侧边栏菜单。
嘿@pepsicode 你的顶部导航已经居中jsfiddle.net/rohitazad/wFQdj/1