css, inline-block elemanlarının kapsayıcının tüm genişliğini kapsadığını belirtir.

Question

Tamam, bu aslında biraz karmaşıktır.

Liste öğelerinin inline-block olarak ayarlandığı bir gezinme listemiz var. Öğe sayısı dinamik listesidir, bu nedenle farklı olabilir.

Amacım, liste öğelerinin kabın tüm genişliğini kapsaması. (örn. her biri 4 liste öğesi varsa kapsayıcının genişliğinin% 25'i [kenar boşluğu/dolgu vb. yok sayılır)]

Tarayıcıların satır içi blok elemanlarına 4px kenar boşluğu eklediği göründüğü ek bir sorun var. aralarında boşluk var (linebreak/space vb.).

2 örnek içeren bir başlangıç ​​noktası olarak bir keman yaptım: birincisi, 2. satırın genişliği birbiriyle ilişkilendiren satır içi blok kipindeki liste öğeleridir.

Ne istediğimi, tüm genişlik için öğelerin başka bir satıra girmeden alınmasını sağlar.

http://jsfiddle.net/4K4cU/2/

düzenleme: ama neden benim 2 örnekte li s altında bir boşluk olduğundan biraz ayrı, ben 0'a çizgi yüksekliği ve font-size belirledik gerçeğini dispite?

Answer 1

O 2016 şimdi ve ben flexbox'a kullanarak bir cevap bu soruyu bilgilendirmek istedik. Tarayıcı uyumluluğu için CanIUse'a danışın.

Bazı çok çıplak kemikleri işaretleme:

<ul> 
    <li>text</li> 
    <li>text</li> 
    <li>text</li> 
    <li>text</li> 
</ul> 

CSS:

ul { 
    display: flex; 
    width: 100%; 
} 
li { 
    flex: 1 1 100% 
} 

Ve fiddle/oynamak eylem olarak görmek için.

Answer 2

Bunun için birden fazla düzeltme var. Tercih ettiğim şey, basitçe yazı tipi boyutu, semantik olmayan CSS'yi içerdiği için, elemanlar arasındaki boşlukları kaldırmaktır. Ve çok daha kolay haha. Kod cevap gerektiriyorsa çünkü: İlk liste width:25%; ayarlı öğeleri vardır ve tek bir satırda pencerede uyuyor

<ul class="list"> 
    <li> 
     text 
    </li><li> 
     text 
    </li><li> 
     text 
    </li><li> 
     text 
    </li> 
</ul> 

Updated jsFiddle. Eğer bunun için değilsen, yanlış anlamış olmalıyım.

DÜZENLEME: Liste öğeleri

bilinmeyen sayıda Bunun bazı CSS3 şeyler, ama geri IE8 çapraz tarayıcı uyumlu olacak şekilde, bir JS çözüm istiyoruz. Böyle bir şey çalışması gerekir:

var listItems = document.querySelectorAll('li'); 
listItems.style.width = listItems.parentNode.style.width/listItems.length; 

İKİNCİ DÜZENLEME: jQuery yerine JS

için winging ama:

var $listitems = $('.list').children(); 
$listitems.width($listitems.parent().width()/$listitems.length); 

Answer 3

bölümde, orijinal konseptini değiştirerek bir yoludur.

CSS:

üst kapsayıcınız, .list günü

.list { 
    padding:0; 
    margin:0; 
    list-style-type:0; 
    overflow: hidden; 
    height: 42px; 
} 
.list li { 
    display: inline-block; 
    line-height: 40px; 
    padding: 0 5px; 
    border:1px green solid; 
    margin:0; 
    text-align:center; 
} 

, çocuk öğelerini kapatmak için bir yüksekliğe ayarlayın. Bu durumda, 40px'i seçtim ve kenarlığı hesaplamak için 2px ekledim.

Ayrıca, .list numaralı overflow: hidden numaralı öğeyi, sahte öğe tarafından oluşturulan 2. satırı gizlemek için ayarlayın.

li elemanları üzerinde dikey metin ortalar line-height: 40px ayarlayın.

Yükseklik sabit olduğu için, ikinci satır gizlenir ve daha fazla beyaz boşluk bırakmadan ebeveyninizi bir kenarlık ve benzeri şekilde stilleyebilirsiniz.

Demo: http://jsfiddle.net/audetwebdesign/WaRZT/

Kusursuz Değil ... Bazı durumlarda

, tek hat üzerinde sığabilecek miktardan daha fazla bağlantıları olabilir. Bu durumda, öğeler oluşturulacak ikinci bir satırı zorlayabilir ve taşma nedeniyle gizlenmiş olabilir, onları görmezsiniz. Eğer sınır kutuları eşit olarak dağıtılmış olmak istiyorsanız

Eşit Olarak Aralık Sınır Kutuları

, sen li öğelere bir genişliğe ayarlamanız gerekir.

içeriği CMS'den gelir ve kodlama üzerinde bir miktar kontrol varsa, dinamik örneğin, önceden tanımlanmış CSS kurallarını kullanarak doğru genişliğini ayarlamak için bir sınıf adını oluşturabilir:

.row-of-4 .list li { width: 24%; } 
.row-of-5 .list li { width: 19%; } 
.row-of-6 .list li { width: 16%; } 

See: http://jsfiddle.net/audetwebdesign/WaRZT/3/

Answer 4

ekranı kullanabilirsiniz: li elemanı ile inline-block ve text-align kullanın: ül eleman ile haklı. Eğer ilgileniyorsanız, lütfen here'u tıklayın.

Answer 5

Pekala, pek çok iyi yanıta ve js/jquery'nin gitmek için tek yol olduğuna inisiyatif almamın nedeni aslında iyi bir css çözümü: tablo hücresi kullanarak.

.list { 
 
    margin:0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    display: table; 
 
    table-layout: fixed; 
 
    width:100%; 
 
} 
 
.list>li { 
 
    display: table-cell; 
 
    border:1px green solid; 
 
    padding:5px; 
 
    text-align: center; 
 
} 
 
.container { 
 
    border: 1px #777 solid; 
 
}

<div class="container"> 
 
    <ul class="list"> 
 
     <li>text</li> 
 
     <li>text</li> 
 
     <li>some longer text</li> 
 
     <li>text</li> 
 
    </ul> 
 
</div>

Bu gibi başka çözümler üstündür Pumbaa80 @ Orijinal öneri:

• CSS okunur
• içi blok ile hiçbir 4 piksel kenar sorun
• yüzer elemanlar için bir clearfix gerekmiyor
• eşit

Fiddle burada li içerik

özlü css genişliği bağımsız dağıtılan korur: http://jsfiddle.net/rQhfC/