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

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

2 голосов
/ 20 октября 2008

У меня есть следующий 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 слегка двигаться, а затем возвращаться назад, когда вы мышь-офф. Есть ли простой способ предотвратить это?

Ответы [ 4 ]

3 голосов
/ 21 октября 2008

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

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

2 голосов
/ 20 октября 2008

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

#menu li
{
   width: 150px;
}

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

1 голос
/ 30 декабря 2011

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

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

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

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

1 голос
/ 18 ноября 2010

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

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

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

...