탐색 모음이 웹 페이지의 가장자리까지 확장되지 않습니다.

내 탐색 모음을 페이지의 나머지 부분까지 확장하려고 시도하고 있지만 어떻게 든이 모양은 current navigation bar입니다.탐색 모음이 웹 페이지의 가장자리까지 확장되지 않습니다.

또한 상단과 측면에 흰색 테두리가있는 것을 볼 수 있습니다. 수정 방법이 있습니까? 나는 다양한 방법을 시도했지만 변화가 없습니다. 어떤 도움이라도 대단히 감사하겠습니다!

HTML & CSS 코드 :

 <html> 
     <head> 

     <style> 

    @import url(https://fonts.googleapis.com/css?family=Lora); 
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab"> 

     body { 
      margin: 0px; 
      padding: 0px; 
      } 


     .nav-bar-block { 

      margin: 0px; 
      padding: 0px; 
      overflow: hidden; 
      background-color: #F8F8F8; 
      background-size: cover; 
      border-bottom: 1px; 
      border-bottom-color: dimgray; 
      display: inline-block; 

     } 

     .nav-bar-block h1 { 
      text-align: center; 
      font-family: Lora, sans-serif; 
      color: #4b4b4b; 
      font-size: 45px; 
      padding: 0px 400px; 

     } 

     .nav-bar-menu { 
      list-style-type: none; 

     } 

     </style> 
    </head> 


    <body> 

     <div class="nav-bar-block"> 
     <h1>Title</h1> 
     </div> 
    </body> 

</html>

출처

2016-08-23 C. Lagos

당신이 다음 상단 전체 너비를 얻을 수 있습니다

display: block;

에 .nav 바 블록을 변경하는 경우 (인라인 블록은 상황이 표시 의미 요소 옆에 있지만 블록은 콘텐츠의 전체 행을 차지할 것임을 의미합니다).

 body { 
 
      margin: 0px; 
 
      padding: 0px; 
 
      } 
 

 

 
     .nav-bar-block { 
 

 
      margin: 0px; 
 
      padding: 0px; 
 
      overflow: hidden; 
 
      background-color: #F8F8F8; 
 
      background-size: cover; 
 
      border-bottom: 1px; 
 
      border-bottom-color: dimgray; 
 
      display: block; 
 

 
     } 
 

 
     .nav-bar-block h1 { 
 
      text-align: center; 
 
      font-family: Lora, sans-serif; 
 
      color: #4b4b4b; 
 
      font-size: 45px; 
 
      padding: 0px 400px; 
 

 
     } 
 

 
     .nav-bar-menu { 
 
      list-style-type: none; 
 

 
     }

 <html> 
 
     <head> 
 

 
     <style> 
 

 
    @import url(https://fonts.googleapis.com/css?family=Lora); 
 
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab"> 
 

 

 

 
     </style> 
 
    </head> 
 

 

 
    <body> 
 

 
     <div class="nav-bar-block"> 
 
     <h1>Title</h1> 
 
     </div> 
 
    </body> 
 

 
</html>

출처

2016-08-23 18:41:55

감사합니다! 그것은 효과가있었습니다 - 상단에 흰색 테두리가있는 이유는 무엇입니까? 내 패딩이나 ..을 고쳐야합니까? –

전적으로 확실하지 않습니다. 원본 게시물을 전체 코드 스 니펫으로 업데이트하려면보다 쉽게 결정할 수 있습니다. 상반되는 다른 스타일이 있다는 느낌이 들었습니다. 요소를 검사하여 Chrome 개발자 도구를 사용할 수 있습니다. 아래쪽으로 스크롤하여 상자 모델을 봅니다. 스타일을 통해 여백/여백/테두리가 적용되면 표시됩니다. –

이것은 전체 코드이므로 충돌이 될 수 있는지 잘 모르겠습니다. 그래도 도와 줘서 고마워! 고맙습니다. –

은 CSS에 이것을 추가하고 메뉴 바는 전체 폭이 있어야합니다

<html> 
    <head> 

    <style> 

@import url(https://fonts.googleapis.com/css?family=Lora); 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab"> 

    body { 
     margin: 0px; 
     padding: 0px; 
     } 


    .nav-bar-block { 

     margin: 0px; 
     padding: 0px; 
     overflow: hidden; 
     background-color: #F8F8F8; 
     background-size: cover; 
     border-bottom: 1px; 
     border-bottom-color: dimgray; 
     display: inline-block; 

    } 

    .nav-bar-block h1 { 
     text-align: center; 
     font-family: Lora, sans-serif; 
     color: #4b4b4b; 
     font-size: 45px; 
     padding: 0px 400px; 

    } 

    .nav-bar-menu { 
     list-style-type: none; 

    } 
    .nav-bar-block { 
     /*Makes the navbar's width full*/ 
     width: 100%; 
    } 

    </style>

<body> 

    <div class="nav-bar-block"> 
    <h1>Title</h1> 
    </div> 
</body>

출처

2017-06-02 06:40:09

탐색 모음이 웹 페이지의 가장자리까지 확장되지 않습니다.

답변

관련 문제