Неупорядоченный список не будет правильно выравниваться внутри div

Question

Я делаю NavBar из изображений.

Изображения внутри элемента списка li, который находится в неупорядоченном списке ul, который находится внутри div.

Проблема, с которой я сталкиваюсь, заключается в том, что когда я делаю неупорядоченный список, отображающий строку в строке, он не выравнивается слева от div, как должен, он начинается с 40 пикселей. Я попытался установить position:absolute;left:0; на ul но это не имеет значения.

position:absolute; должен сделать его выровненным относительно его родительского элемента, но это не так.

Это JSFiddle, отображающий проблемы.

(красный блок является ДИВ, это красный, чтобы показать вам, где сторона DIV так вы можете увидеть, как далеко от ул есть)

Есть ли что-то я не хватает? Почему изображение начинается с 40 пикселей справа от того места, где оно должно быть?

Answer 1

CSS

#navbar ul{ 
    position:absolute; 
    left:0px; 
    margin:0 0 0 0; 
    padding: 0 0 0 0; 
} 

Answer 2

Необходимо добавить прокладку: 0;

#navbar ul{ 
    padding:0; 
} 

Кроме того, 2 вещи, которые вы могли бы хотеть смотреть на это вызовет у вас подобные проблемы:

1) Наследование

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

2) CSS сброса

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

Answer 3

ul и другие списки имеют 40px padding-left по умолчанию в старых IE это margin, поэтому просто удалите отступы и поля.