Навигационная панель не будет полностью закрывать экран

Question

Я искал вокруг так хорошо, как мог, но я не мог найти ответ, возможно, я не использовал правильные ключевые слова.

В любом случае, я сделал простой навигатор и установил его на 100% ширину, но он не будет закрывать крайнюю правую часть экрана. Я попытался использовать право: -5px; но это не помогло.

Это jsfiddle, чтобы увидеть мой код.

http://jsfiddle.net/xBkma/

CSS:

#nav { 
width: 100%; 
float: left; 
margin: 0 0 0 0; 
padding: 0; 
background-color: #F3B33C; 
border-bottom: 4px solid #ccc; 
position: absolute; 
top: -1px; 
left: -5px; 
margin-right: -5px; 
} 

HTML

<div id="nav"> 
    <ul> 
    <li><a id="home" href="index.html"> <img src="images/black home.png" width="28" height="28"></a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Forum</a></li> 
    <li><a href="#">Database</a></li> 
    </ul> 
    </div> 

Answer 1

Прежде всего, вам не нужно плавать, когда вы используете position: absolute;

Во-вторых подходит к вашей навигации, в первую очередь вам необходимо сбросить таблицу стилей браузера по умолчанию, вы можете просто использовать этот

* { 
    margin: 0; 
    padding: 0; 
} 

позже изменить left: -5px; к left: 0; от #nav и вы хорошо идти

Demo

Answer 2

Удалить left: -5px; и попробуйте еще раз

Answer 3

Просто удалите left: -5px вы добавили на #nav http://jsfiddle.net/xBkma/4/

Answer 4

Попробуйте этот код вместо:

body{ 
    padding:0px; 
    margin:0px; 
} 
#nav { 
    width: 100%; 
    float: left; 
    margin: 0 0 0 0; 
    padding: 0; 
    background-color: #F3B33C; 
    border-bottom: 4px solid #ccc; 
    position: absolute; 
    } 

большинство браузеров, кажется, есть некоторые заполнения и полей на организм таким образом установить их к нулю

Answer 5

Вам нужно добавить размер коробки: border-box;

Подобно

#nav { 
width: 100%; 
box-sizing: border-box; 
float: left; 
margin: 0 0 0 0; 
padding: 0; 
background-color: #F3B33C; 
border-bottom: 4px solid #ccc; 
position: absolute; 
top: -1px; 
left: -5px; 
margin-right: -5px; 
} 

добавить body{padding: 0; margin: 0;}

Работа скрипку http://jsfiddle.net/xBkma/8/

Answer 6

Удалить

позицию: абсолютная

навигация. Позиция и поплавки противоречат друг другу.

http://jsfiddle.net/xBkma/6/

html, body { 
    padding: 0; 
    margin: 0; 
} 

#nav { 
    width: 100%; 
    float: left; 
    margin: 0 0 0 0; 
    padding: 0; 
    background-color: #F3B33C; 
    border-bottom: 4px solid #ccc; 
} 

Answer 7

Вы должны попытаться удалить маржинального-правый и левый свойства в навигационный элемент и установить корпус с запасом 0.

body{ 
margin: 0; 
}