Continui a ridimensionare il testo spingendo gli altri elementi nel suo contenitore?

Question

Ho il seguente 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 nel CSS ho

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

Tutto funziona abbastanza bene, tranne che quando passo il mouse sui collegamenti, il colore cambia e diventa grassetto, che è quello che voglio, ma fa anche muovere leggermente tutti gli altri elementi li e poi tornare indietro quando Mouse-off. C'è un modo semplice per impedire che ciò accada?

Answer 1

Non sono sicuro di chi abbia fatto -1, ma la risposta di Mauro è sostanzialmente corretta: non puoi fare in modo banale che un elemento con larghezza automatica dipenda da quale larghezza sarebbe stata se il carattere all'interno non fosse in grassetto.

Tuttavia, un 'float: left;' Anche la regola sarà necessaria in quanto non è possibile impostare la larghezza di un elemento di visualizzazione in linea. E 'em' sarebbe probabilmente un'unità migliore, per rendere la larghezza richiesta dipendente dalla dimensione del carattere nei pulsanti.

Answer 2

Aggiungi una larghezza agli elementi dell'elenco che è più grande della larghezza in grassetto degli elementi, in questo modo non verranno spinti fuori linea.

#menu li
{
   width: 150px;
}

In alternativa puoi provare un carattere monospace, che non sarà influenzato dal grassetto / non piegato al passaggio del mouse.

Answer 3

prova a usarlo menutext { altezza della linea: 10px; / * o qualunque altra cosa * / }

e inoltre, per impostare la larghezza di un elemento inline, usa display: inline-block;

float: left potrebbe non essere così amichevole, se lo usi e rovina tutto usa clear: entrambi

Answer 4

Ho appena avuto lo stesso problema. Una soluzione a cui ho pensato, e che potrei usare da ora in poi, è invece usare text-shadow.

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

Il testo apparirà comunque leggermente sfocato. Se imposti il ??3o parametro su 0, il testo non sarà sfocato ma apparirà solo un po 'più audace.

Direi che è meglio che trattare testi con ampiezza dinamica.