Как мне отладить макет CSS?

#css #layout

#css #макет

Вопрос:

Откройте меню контактов на этой панели навигации, и вы заметите, что оно немного смещено вправо.

  1. Почему это?
  2. Как я могу отладить эти проблемы самостоятельно, не задавая глупых вопросов по SO? Я использую инструмент компоновки Firebug, но я действительно не понял из него, почему это происходит.

Ответ №1:

что сказал К. Иванов ..
и, пожалуйста, рассмотрите возможность использования инструментов браузера для отладки этих вещей.
Существуют:

  • инструменты разработчика в IE
  • Дополнение FireBug для firefox
  • и инструменты разработчика в Chrome

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

Ответ №2:

создайте padding-left: 0px; внутри вашего элемента css #wd-navbar ul

Комментарии:

1. Принято. Тем не менее, я не уверен, как отлаживать эти вещи… это просто вопрос разработки взгляда на это?

2. Я использовал инструменты разработчика в IE (F12), как сказал Александр Таран

Ответ №3:

Вот видео, объясняющее, как использовать firebug для отладки CSS:http://www.youtube.com/watch?v=pDhhM4-o_VEamp;feature=player_embedded#at=313

Конечно, сначала вам нужно понять основы CSS и коробочную модель:http://www.w3schools.com/css/css_boxmodel.asp

Ответ №4:

И теперь есть новый инструмент для визуализации пространства, занимаемого любым элементом, на который вы наводите курсор мыши:

Визуализатор HTML-бокса — GitHub