CSS'de bir Sabit Genişlik Düğmesi Oluşturma

Question

Değişken genişliğe sahip birkaç düğmem var ve bunların hepsinin belirli bir genişlik olmasını istiyorum. width: 150px;'u eklemeye çalıştığımda işe yaramıyor. Tümü genişlik ayarlı olacak bu düğmeleri nasıl oluşturabilirim?

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

Çift sorunları:

1. a eleman bunu açık bir genişliğe veremez yani bir satır içi unsurdur.
2. Sınıflar bir sayı ile başlayamaz.

Bunu width konusunda isteğinize saygı olması block veya inline-block böyle bir şey için display özelliğini ayarlayın neeed edeceğiz

. Ayrıca, bunun yerine sorun numarası 2'yi çözen width-150px gibi bir sınıf adı kullanın.

Fiddle: Sen sayılarla sınıf isimleri başlayamaz http://jsfiddle.net/yQu8H/5/

Answer 2

CSS Sınıf isimleri bir sayı ile başlayamaz: Burada

Here is a Fiddle ve

kodudur. Bir harf kullanmalısınız ve isimler büyük/küçük harfe duyarlıdır.

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

Answer 3

. Belki sorun budur. Lütfen Grammar

Answer 4

Sınıf adıyla ilgili sorunun doğru olduğunu, ancak çözümün yalnızca bir kısmını kontrol edin.

Ayrıca, (a div gibi) bir blok elemanı içinde tespit elemanı (bir satır içi öğesi) içine ve daha sonra blok elemanına genişliğini tayin gerekir. Yani, "yapı" stilinin div ve metin stiline uygulanmasını istiyorsunuz.

Bu, küçük bir refactoring uygulanmış kemanınızdır. HTML5'de

http://jsfiddle.net/gZtdZ/