从导航栏中删除填充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>