내 로그 아웃 링크가 화면 가장자리에서 벗어나는 이유는 무엇입니까?

Question

내 헤더 섹션의 오른쪽에있는 탐색 링크를 올바르게 정렬하려고합니다. 그래서

  <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">My Subscriptions</a></li> 
      <li><a href="#">Help</a></li> 
      <li><a rel="nofollow" data-method="delete" href="/logout">Log Out</a></li> 
      </ul> 

을 생성하고이 스타일

header ul { 
    float: right; 
    list-style: none; 
} 

header ul li { 
    float: left; 
    margin-left: 15px; 
} 

을 추가하지만 내 로그 아웃 링크를 화면의 가장자리를 것입니다 - https://jsfiddle.net/p2rwgfjc/합니다. 어떻게하면 모든 텍스트가 화면에 그대로 유지되도록 수정할 수 있습니까?

Answer 1

header ul에 margin-right: 15px을 그냥 추가하십시오.

header ul { 
    float: right; 
    list-style: none; 
    margin-right: 15px; 
} 

바이올린 :는 https://jsfiddle.net/og165aky/

Answer 2

나는 당신이 뭔가를 떠 때, 당신은 그렇지 않으면뿐만 아니라 부모를 떠 있다고 생각 당신이 부유 한 요소가 다른 HTML 요소 구조를 떠나 별도의 요소가된다 주위에 떠있는.

부모 요소를 부동 상태로두고 float에 none 또는 inherit을 지정합니다.

Answer 3

이유는 블록의 너비에 기본 채우기가 포함되어 있고 너비가 100 %이므로 머리글의 전체 너비가 100 %보다 커서 화면 가장자리에서 벗어납니다. 그래서 블록의 기본 여백과 패딩을 지워야합니다. 가장 편리한 방법은 * {padding : 0, margin : 0}입니다. 이 답변으로 도움이되기를 바랍니다.

Answer 4

1. float에 대해 잊어 버리십시오.
2. 래퍼 너비에 유의하십시오.
3. 래퍼에서 flex를 사용합니다.
4. UL에서 flex를 사용합니다.

   header{ 
    
       box-shadow: none; 
    
       background: #44505d; 
    
       border-bottom: none; 
    
       height: 73px; 
    
       display:flex; 
    
       flex-direction:row; 
    
       flex-wrap:wrap; 
    
       align-items:center; 
    
       justify-content:center; 
    
   } 
    
   
    
   .wrapperLogo{ 
    
   width:30%;} 
    
   
    
   header nav{ 
    
   width:70%;} 
    
   
    
   
    
   #logo { 
    
       font-size: 1.7em; 
    
       color: #fff; 
    
       text-transform: uppercase; 
    
       letter-spacing: -1px; 
    
       padding-top: 9px; 
    
       font-weight: bold; 
    
   } 
    
   
    
   
    
   #logo:hover { 
    
       color: #fff; 
    
       text-decoration: none; 
    
   } 
    
   
    
   header ul { 
    
       list-style: none; 
    
       display:flex; 
    
       justify-content:space-around; 
    
   }

   <header id="branding" class="clearFix"> 
    
       <div class="wrapperLogo"> 
    
       <a id="logo" href="#">sample app</a> 
    
       </div> 
    
   \t <nav> 
    
   \t <ul class="nav navbar-nav navbar-right"> 
    
   \t <li><a href="#">My Subscriptions</a></li> 
    
   \t <li><a href="#">Help</a></li> 
    
   \t <li><a rel="nofollow" data-method="delete" href="/logout">Log Out</a></li> 
    
   \t </ul> 
    
   \t </nav> 
    
   </header>

그것의 완벽하지, 그래 물론. 모바일보기도 수정해야합니다. 글꼴과 너비와 높이가 비슷합니다. 이 하나

header ul { 
     list-style: none; 
     display:flex; 
     justify-content:space-around; 
    } 

에서 등

보면 당신은없이 컨텐츠를 정당화 수정할 수 있습니다 또는 당신은 또한 그것을 삭제하고 내가 "퍼팅하고 이전 CSS를 header ul li {margin-left:15px}