Mantenha redimensionar o texto de empurrar os outros elementos em seu redor recipiente?

Question

Eu tenho o seguinte 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>

e no css Eu tenho

.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;
}

Tudo funciona muito bem, exceto que quando eu mouse sobre os links, a cor muda e torna-se em negrito, que é o que eu quero, mas também faz com que todos os outros elementos li para mover um pouco e depois voltar quando você rato-off. Existe uma maneira fácil de impedir que isso aconteça?

Answer 1

Não tenho certeza que -1ed, mas a resposta de Mauro é essencialmente correto:. Você não pode trivialmente tornar um item com largura automática depender do que a largura teria sido se o interior da fonte não eram negrito

No entanto, um 'float: left;' regra também será necessário que você não pode definir a largura de um elemento inline-display. E 'em' provavelmente seria uma unidade melhor, para tornar o exigido largura dependente do tamanho da fonte nos botões.

Answer 2

Adicionar uma largura para os elementos item da lista que é maior do que a largura em negrito dos itens, desta forma eles não vão ser empurrado para fora da linha.

#menu li
{
   width: 150px;
}

Como alternativa, você pode tentar uma fonte monoespaçada, que não vai ser afetada pela negrito / unbold em foco.

Answer 3

tente usar este MenuText { A linha-altura: 10px; /* como queiras */ }

e também, para definir a largura de um elemento em linha, visor utilização: inline-bloco;

float: left pode não ser tão amigável, se você usá-lo e ele mexe as coisas utilização clear: both

Answer 4

Eu apenas tive o mesmo problema. Uma solução que eu pensava, e pode usar a partir de agora, é usar text-shadow vez.

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

O texto vai olhar um pouco borrão embora. Se você definir o 3º parâmetro para 0, o texto não será borrão, mas vai olhar apenas um mais ousado pouco pouco.

Eu diria que este é melhor do que lidar com textos de largura dinâmica.