navbar에서 패딩 제거 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

이 #nav li에 대한 CSS에서 다음과 같이 변경합니다 :

#nav li { 
    float: left; 
} 

제거 display:inline-block; 및 float: left; 속성을 대체했다. 같은 한 줄의 ul 태그에 내용을

#nav li { 
    display: 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> 

이 제거됩니다 그대로 CSS를 유지 Bokdem의 의견

@를 따라

는

업데이트 여분의 공간. 당신이 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>