¿Seguir redimensionando el texto para que no empuje los otros elementos en su contenedor?

Question

Tengo el siguiente 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>

y en el css tengo

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

Todo funciona bastante bien, excepto que cuando muevo el mouse sobre los enlaces, el color cambia y se pone en negrita, que es lo que quiero, pero también hace que todos los demás elementos de li se muevan ligeramente y luego se muevan hacia atrás cuando ratón apagado ¿Hay una manera fácil de evitar que esto suceda?

Answer 1

No estoy seguro de quién lo hizo, pero la respuesta de Mauro es esencialmente correcta: no se puede hacer de forma trivial un elemento con ancho automático dependiendo de cuál hubiera sido el ancho si la fuente no estuviera en negrita.

Sin embargo, un 'float: left;' la regla también será necesaria ya que no puede establecer el ancho de un elemento de visualización en línea. Y 'em' probablemente sería una mejor unidad, para hacer que el ancho requerido dependa del tamaño de fuente en los botones.

Answer 2

Agregue un ancho a los elementos del elemento de la lista que sea más grande que el ancho en negrita de los elementos, de esta forma no se eliminarán de la línea.

#menu li
{
   width: 150px;
}

Alternativamente, puedes probar con una fuente monoespaciada, que no se verá afectada por la negrita / sin negrita en el hover.

Answer 3

intenta usar esto menutexto línea de altura: 10px; /* o lo que sea */ }

y también, para establecer el ancho de un elemento en línea, use display: inline-block;

float: left no puede ser tan amigable, si lo usas y desordena el uso claro: ambos

Answer 4

Acabo de tener el mismo problema. Una solución que pensé, y que podría usar de ahora en adelante, es usar text-shadow en su lugar.

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

El texto se verá un poco borroso sin embargo. Si establece el tercer parámetro en 0, el texto no se verá borroso sino que se verá un poco más enérgico.

Yo diría que esto es mejor que tratar con textos dinámicos de ancho.