從導航欄中刪除填充UL css

Question

我正在處理某些內容，並在我的css navabar上不斷獲得一些填充，它非常簡單，但我無法弄清楚它從哪裏將填充從5像素推向右側。

Here is a JSFiddle

請注意，在上空盤旋，更新個人資料之間的小灰空間？

我似乎無法找到任何會導致這種情況的CSS。任何人都注意到我的代碼中的任何東 CSS：

body { 
      margin: 20px; 
      font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; 
      background-color: #555; 
     } 
     #nav { 
      text-align: center; 
     } 
     /* Begin Navigation Bar Styling */ 
     #nav ul { 
      text-align: center; 
      font-size: 11px; 
      width: 100%; 
      margin: 0; 
      padding: 0; 
      display: inline-block; 
      padding: 0; 
      list-style: none; 
      background-color: #f2f2f2; 
      border-bottom: 1px solid #ccc; 
      border-top: 1px solid #ccc; 
     } 
     #nav li { 
      display: inline-block; 
     } 
     #nav li a { 
      display: block; 
      padding: 8px 15px; 
      text-decoration: none; 
      font-weight: bold; 
      color: #069; 
      border-right: 1px solid #ccc; 
     } 
     #nav li a:hover { 
      color: #c00; 
      background-color: #fff; 
     } 
     /* End navigation bar styling. */ 
     div { 
      text-align: center; 
     } 
     div#page { 
      background-color: white; 
      margin: 0 auto; 
      text-align: left; 
      width: 755px; 
      padding: 0px 10px 0 10px; 
     } 
     div#header { 
      border-bottom: 1px solid black; 
      height: 30px; 
      line-height: 30px; 
     } 
     div#content { 
      background: none repeat scroll 0 0 none; 
      border: 0px solid blue; 
      width: 100%; 
      line-height: 500px; 
      min-height: 500px; 
      _height: 500px 
     } 
     div#footer { 
      border: 0px solid red; 
      height: 30px; 
      line-height: 30px; 
      border-top: 1px solid black; 
      font-size: 9pt; 
     } 

HTML：

<div id="page"> 

      <div id="header"> 



       <div style="float: left;">Welcome Admin</div> 

       <div style="float: right;">LOGOUT</div> 

       <div id="nav"> 



        <ul id="nav"> 

         <li><a href="#">Home Page</a> 
         </li> 

         <li><a href="#">My Account</a> 
         </li> 

         <li><a href="#">Update Profile</a> 
         </li> 

         <li><a href="#">Change Avatar</a> 
         </li> 

         <li><a href="#">Change Password</a> 
         </li> 

         <li><a href="#">Support</a> 
         </li> 



        </ul> 

       </div> 

      </div> 

      <div id="content">Content</div> 

      <div id="footer"> 
       <div style="float: right;">copyright 2014</div> 
      </div> 

     </div> 

Answer 1

：

或者

#nav li { 
    display: inline-block; 
    margin-left: -4px; 
} 

或者

寫ul標籤中的內容。

選項1

您可以通過添加負邊距來消除此缺口。在您的個案

#nav li { 
    margin-right: -3px; 
} 

DEMO 1

選項2

可以省略通過你的HTML註釋掉的空格的差距。

<ul id="nav"> 
    <li><a href="#">Home Page</a> 
    </li><!-- 
    --><li><a href="#">My Account</a> 
    </li><!-- 
    --><li><a href="#">Update Profile</a> 
    </li><!-- 
    --><li><a href="#">Change Avatar</a> 
    </li><!-- 
    --><li><a href="#">Change Password</a> 
    </li><!-- 
    --><li><a href="#">Support</a> 
    </li> 
</ul> 

它看起來時髦，但它的工作原理:)

DEMO 2

Answer 2

請在CSS以下更改爲#nav li：

#nav li { 
    float: left; 
} 

刪除display:inline-block;與float: left;財產取而代之。

#nav li { 
    display: inline-block; 
} 

而寫的內容在單行ul標籤，如：

<li><a href="#">Home Page</a></li><li><a href="#">My Account</a></li><li><a href="#">Update Profile</a></li><li><a href="#">Change Avatar</a></li><li><a href="#">Change Password</a></li><li><a href="#">Support</a></li> 

這將消除根據@ Bokdem的評論

保持CSS的是

更新額外的空間。如果你使用inline-block元素離開連續元素之間的間隙

<li><a href="#">Home Page</a></li><!-- 
--><li><a href="#">My Account</a></li><!-- 
--><li><a href="#">Update Profile</a></li><!-- 
--><li><a href="#">Change Avatar</a></li><!-- 
--><li><a href="#">Change Password</a></li><!-- 
--><li><a href="#">Support</a></li>