Панель навигации не будет расширяться до края веб-страницы

Я пытаюсь заставить свою панель навигации распространяться на остальную часть страницы, но как-то выглядит так: 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

Если изменить .nav-бар-блок для

display: block;

, то вы получите верхнюю полную ширину (встроенный блок означает вещи появляются рядом с элементом, но блок означает, что они будут обрабатывать всю строку содержимого).

 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 и ваш Navbar должны иметь полную ширину:

<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

Панель навигации не будет расширяться до края веб-страницы

ответ

Смежные вопросы