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

StackOverflow https://stackoverflow.com/questions/217741

  •  03-07-2019
  •  | 
  •  

Вопрос

у меня есть следующий HTML 

          <div id="menu">
            <ul class="horizMenu">
            <li id="active"><a href="#" id="current">About</a></li>
            <li><a href="#">Archive</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Item four</a></li>
            <li><a href="#">Item five</a></li>
            </ul>
        </div>

и в css у меня есть 

.horizMenu li
{
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}
#menu
{


    text-align:center;
    margin-bottom:10px;
    letter-spacing:7px;
}
#menu a
{
    color:red;

}
#menu a:hover
{
    color:blue;
    font-weight:bold;
}

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

Это было полезно?

Решение

Не уверен, кто -1ed, но ответ Мауро в основном правильный: вы не можете просто сделать элемент с автоматической шириной зависящим от того, какой была бы ширина, если бы шрифт внутри не был жирным.

Однако, 'float: left;' Правило также будет необходимо, так как вы не можете установить ширину элемента inline-display. И 'em', вероятно, будет лучшей единицей, чтобы сделать требуемую ширину зависимой от размера шрифта в кнопках.

Другие советы

Добавьте ширину элементов списка, которая больше жирной ширины элементов, таким образом, они не будут вытеснены из линии. 

#menu li
{
   width: 150px;
}

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

попробуйте использовать это menutext { высота строки: 10 пикселей; / * или как угодно * / }

а также, чтобы установить ширину встроенного элемента, используйте display: inline-block;

float: left может быть не таким дружелюбным, если вы его используете, и это все испортит, используйте clear: both

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

a:hover {
  color:blue;
  text-shadow:0px 0px 1px blue;
}

Текст будет выглядеть немного размытым. Если для третьего параметра установить значение 0, текст не будет размытым, а будет выглядеть немного смелее.

Я бы сказал, что это лучше, чем иметь дело с текстами с динамической шириной.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top