вопрос заполнения пробелов - PullRequest
0 голосов
/ 18 февраля 2012

Я строю навигацию, в которой, несмотря на мои манипуляции с отступами, я не могу создать равные расстояния между подменю.Это немного сложно описать, поэтому я создал jsfiddle здесь: http://jsfiddle.net/kCXrX/

Если у кого-то есть секунда, вы можете сообщить мне, почему, когда вы наводите курсор на элемент, расстояние между позициями нето же самое - расстояние слева больше, чем справа

Любое руководство приветствуется!

Ответы [ 5 ]

2 голосов
/ 18 февраля 2012

Я разбудил вашу скрипку здесь: http://jsfiddle.net/tLzST/1/

Ваш HTML был недействительным, UL не могут быть прямыми потомками UL, поэтому я поместил ваши списки .submenu в LI. Один или два стиля настройки тоже.

1 голос
/ 18 февраля 2012

в ul.subnav измените свой отступ следующим образом: padding: 0 5px 10px 1px;

если вы нажали ctrl-a на вашем столе, вы увидите, что ваша строка border-right фактически имеет то, что кажется 3 пикселемотступы автоматически добавляются к себе.Если принять во внимание это дополнение, ваш код на самом деле работает нормально.в любом случае вот новый jsfiddle: http://jsfiddle.net/kCXrX/5/

0 голосов
/ 18 февраля 2012

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

     ul.subnav {
         border-right: solid 1px;
         display: inline-block;
         height: 80px;
         <strong>padding: 0 5px 10px 1px;</strong>
         vertical-align: top;
         width: 116px;
     }
     
0 голосов
/ 18 февраля 2012

Дополнительные отступы появляются только потому, что вы используете inline-block.Попробуйте удалить это свойство (display:inline-block) и заменить его на float:left.Теперь пришло время настроить .navigation так, чтобы оно принудительно содержало subnav (плавающая проблема), добавив overflow:hidden;.Я должен отредактировать вашу скрипку, взгляните на нее.http://jsfiddle.net/kCXrX/

0 голосов
/ 18 февраля 2012

Я добавил ul.subnav {border-left: solid 1px transparent;padding: 0 5px 10px 0;} и теперь это выглядит лучше для меня.

...