Встроенное смещение элементов при осмеливаниях на парении

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

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

, я был бы boo'd, если бы я использовал переключающиеся шрифты для своего класса Дизайна Формы :-)

(В °), шрифт слова часто неправильно используется. "Verdana" гарнитура , "Verdana нормальный" и "Verdana, полужирный", отличающийся шрифты из той же гарнитуры.

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

Я исправил меню когда полужирный успех при наведении курсора. Это поддерживает быстро реагирующий, это - мой код:

(function ($) {
'use strict';

$(document).ready(function () {
    customWidthMenu();
});
$(window).resize(function () {
    customWidthMenu();
});
function customWidthMenu() {
    $('ul.nav li a').each(function() {
        $(this).removeAttr('style');
        var this = $(this);
        var width = this.innerWidth();
        this.css({'width': width + 12});
    });
}})(jQuery);

Я действительно не могу терпеть, когда кто-то говорит вам не делать что-то таким образом, когда есть простое решение проблемы. Я не уверен насчет элементов li, но я исправил ту же проблему. У меня есть меню, состоящее из тегов div.

Просто установите для тега div значение «display: inline-block». Встроенные, чтобы они располагались рядом друг с другом и блокировались, чтобы вы могли установить ширину. Просто установите ширину, достаточную для размещения текста, выделенного жирным шрифтом, и выровняйте центр текста.

(Примечание: похоже, мой html [ниже] удаляется, но каждый пункт меню имеет тег div, обернутый вокруг него с соответствующий идентификатор и имя класса SearchBar_Cateogory. то есть:

#ROS_SearchSermons { width: 75px; }
#ROS_SearchIllustrations { width: 90px; }
#ROS_SearchVideos { width: 55px; }
#ROS_SearchPowerPoints { width: 90px; }
#ROS_SearchScripture { width: 70px; }

.SearchBar_Cateogry
{
    display: inline-block;
    text-align:center;
}