Creare un pulsante a larghezza fissa nei CSS

Question

Ho diversi pulsanti con larghezza variabile e vorrei che tutti fossero di una certa larghezza. Quando ho tentato di aggiungere width: 150px; non funziona. Come creo questi pulsanti che avranno tutti una larghezza impostata?

Here is a Fiddle e qui è il codice:

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

problemi di coppia:

1. L'elemento a è un elemento inline, nel senso che non si può dare una larghezza esplicita.
2. Le classi non possono iniziare con un numero.

Ti neeed per impostare la vostra proprietà display a qualcosa come block o inline-block di averlo rispettare i vostri desideri per quanto riguarda width. Inoltre, utilizzare un nome classe come width-150px, che risolve il problema numero 2 sopra.

Fiddle: http://jsfiddle.net/yQu8H/5/

Answer 2

I nomi di classe CSS non possono iniziare con un numero. È necessario utilizzare una lettera e i nomi sono sensibili al maiuscolo/minuscolo.

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

Answer 3

Non è possibile iniziare i nomi delle classi con i numeri. Forse è questo il problema Si prega di verificare il Grammar

Answer 4

La risposta sul nome della classe è corretta, ma solo una parte della soluzione.

È inoltre necessario racchiudere l'elemento di ancoraggio (un elemento in linea) all'interno di un elemento di blocco (come un div) e quindi assegnare la larghezza all'elemento di blocco. Quindi vuoi lo stile "struttura" da applicare al div e lo stile del testo da applicare all'ancora.

Questo è il tuo violino con un piccolo refactoring applicato.

http://jsfiddle.net/gZtdZ/