Crear un botón de ancho fijo en CSS

Question

Tengo varios botones que tienen ancho variable y me gustaría que tengan un ancho determinado. Cuando intenté agregar width: 150px;, no funciona. ¿Cómo creo estos botones que tendrán un ancho establecido?

Here is a Fiddle y aquí está el código:

HTML

<p><a class="dark_button 150px-width" href="#">Lorem</a></p> 
<p><a class="dark_button 150px-width" href="#">Lorum Ipsum</a></p> 
<p><a class="dark_button 150px-width" href="#">Lorum Ipsum dolor</a></p> 
<p><a class="dark_button 150px-width" href="#">Lorum Ipsum dolor sit amet</a></p> 

CSS

.dark_button{ 
    border-top: 1px solid #969696; 
    background: #000000; 
    background: -webkit-gradient(linear, left top, left bottom, from(#545454), to(#000000)); 
    background: -webkit-linear-gradient(top, #545454, #000000); 
    background: -moz-linear-gradient(top, #545454, #000000); 
    background: -ms-linear-gradient(top, #545454, #000000); 
    background: -o-linear-gradient(top, #545454, #000000); 
    padding: 5px 10px; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; 
    -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; 
    box-shadow: rgba(0,0,0,1) 0 1px 0; 
    text-shadow: rgba(0,0,0,.4) 0 1px 0; 
    color: #e3e3e3 !important; 
    font-size: 14px; 
    text-decoration: none; 
    vertical-align: middle; 
} 
.dark_button:hover { 
    border-top-color: #4f4f4f; 
    background: #4f4f4f; 
    color: #ccc; 
    text-decoration:none; 
} 
.dark_button:active { 
    border-top-color: #4a4a4a; 
    background: #4a4a4a; 
} 

.150px-width{ 
width: 150px; 
} 

Answer 1

cuestiones: Pareja

1. El elemento a es un elemento en línea, lo que significa que no se puede dar una anchura explícita.
2. Las clases no pueden comenzar con un número.

Usted neeed para establecer su propiedad display a algo así como block o inline-block tener que respetar sus deseos con respecto a width. Además, use un nombre de clase como width-150px, que resuelve el problema número 2 anterior.

violín: http://jsfiddle.net/yQu8H/5/

Answer 2

Los nombres de clases CSS no pueden comenzar con un número. Debe usar una letra, y los nombres son sensibles a mayúsculas y minúsculas.

Ver: Which characters are valid in CSS class names/selectors?

Answer 3

No se puede iniciar nombres de las clases con números. Tal vez ese es el problema. Compruebe el Grammar

Answer 4

La respuesta sobre el nombre de la clase es correcta, pero solo parte de la solución.

También necesita encerrar el elemento de anclaje (un elemento en línea) dentro de un elemento de bloque (como un div) y luego asignar el ancho al elemento de bloque. Por lo tanto, desea que el estilo de "estructura" se aplique al div y al estilo del texto para aplicarlo al delimitador.

Este es tu violín con un poco de refactorización aplicado.

http://jsfiddle.net/gZtdZ/