% 100 genişliğe sahip olmayan ekran bloğu

99

Display özelliğini kullanarak bir span öğesini başka bir öğenin altında görünecek şekilde ayarlamak istiyorum. Satır içi blok uygulamayı denedim, ancak başarılı olamadım ve bir şekilde öğeye% 100 genişlik vermekten kaçınmayı başarırsam bloğu kullanabileceğimi düşündüm (öğenin "uzamasını" istemiyorum). Bu yapılabilir mi, yoksa, bu tür bir sorunu çözmek için iyi bir uygulama nedir?

Örnek: her gönderinin sonunda bir "daha fazla oku" bağlantısı oluşturmak istediğim bir haber listesi (not: <a>yerine <span>)

<li>
<span class="date">11/15/2012</span>
<span class="title">Lorem ipsum dolor</span>
<a class="read-more">Read more</a> 
</li>

Güncelleme: Çözüldü. CSS'de uygula

li {
    clear: both;
}
li a {
    display: block;
    float: left;
    clear: both;
}

— Staffan Estberg
kaynak

1

Bize gösterecek herhangi bir işaretiniz (HTML veya CSS) var mı? Gerçekte üzerinde çalışacak hiçbir şey olmadan sorun üzerinde çalışmak zordur. Ayrıca jsfiddle üzerinde bir demo iyi olur.

— Tom Oakley

Sadece bir span öğesini konumlandırmakla ilgili olduğu için herhangi bir örnek koda ihtiyacım olmadığını düşündüm. Güncellenen gönderiye bakın.

— Staffan Estberg

Aşağıda bahsettiğim gibi yalnızca bir satır kod kullanarak tüm bu işaretlemeyi ciddi şekilde azaltabilirsiniz.

— ha404

76

Sorunuzu doğru bir şekilde anlıyorsam, aşağıdaki CSS, a'nızı aralıkların altında gezdirecek ve% 100 genişliğe sahip olmasını önleyecektir:

a {
    display: block; 
    float: left; 
    clear: left; 
}

— PJ McCormick
kaynak

Bunu uygulamayı denedim, ancak span öğelerinde (örnekte başlık ve tarih) float olmadığından, bağlantı son aralıktan önce konumlandırılır. Sanırım bir çözüm, li float'taki tüm alt öğeleri yapmak olacaktır.

— Staffan Estberg

Bu, li ebeveyn için bir düzeltme uygularsam işe yarar. Bu çözümle gidecek, teşekkürler PJ.

— Staffan Estberg

158

Kullanın display: table.

Bu cevap en az 30 karakter olmalıdır; 20 girdim, işte birkaç tane daha.

— ha404
kaynak

13

Dahi çözüm. margin: 0 auto;merkezde ihtiyacınız varsa.

— Mafia

4

Bence harikasın

— billynoah

1

display: table;çalışır, ancak herhangi bir dolgu kabul etmez.

— donquixote

@ ha404 haklısın, dolgu işleri! jsfiddle.net/wgj7xvLe/4 en azından tarayıcımda (Chromium).

— donquixote

3

@donquixote border-collapse: ayrık kullandığınız sürece dolguyu kabul etmelidir. sadece o problemi yaşadım.

— Brad

34

kullanabilirsiniz:

width: max-content;

Not: destek sınırlıdır, destekleyen tarayıcıların tam bir dökümü için burayı kontrol edin

— Mustafa J
kaynak

Bunu hiç duymamıştım! İlginç.

— Ryan

Chrome 46 ve FF 66'dan beri iyiydi. Cevap kabul edilmelidir. inline-blockve diğerleri düzenimi bozuyordu.

— i336_

1

@ i336_ Bugün itibariyle hala Edge tarayıcısı tarafından desteklenmemektedir.

— ChrisW

Edge mi yoksa Chromium Edge mi? (Açık olmak gerekirse; eski oldukça uzun bir süre geçiş

— yapacak

Caniuse.com'a göre, 14 Ocak 2020'de yayınlanan Edge 79'dan itibaren Edge'de desteklenmektedir. Toplamda% 92 destek puanına sahiptir. caniuse.com/?search=max-content Bu bana hoş bir hoş geldiniz. Yaklaşık 2 yıl önce ilk duyduğumda, üretimde kullanmam için yeterince geniş bir desteğe sahip değildi ama şimdi var.

— Xandor

7

Her satırı kendi bölmesinde tutardım, bu yüzden ...

<div class="row">
    <div class="cell">Content</div>
</div>
<div class="row">
    <div class="cell">Content</div>
</div>

Ve sonra CSS için:

.cell{display:inline-block}

Orijinal kodunuzu görmeden size bir çözüm sunmak zor.

— George
kaynak

1

Teşekkürler, ancak herhangi bir div öğesini karıştırmamayı tercih ederim.

— Staffan Estberg

5

Yine: biraz geç olabilecek bir cevap (ama yine de cevabı için bu sayfayı bulanlar için).

Yerine display:block;kullanımıdisplay:inline-block;

— Renske
kaynak

2

Bunu dene:

li a {
    width: 0px;
    white-space:nowrap;
}

— Roberto
kaynak

1

Bu sorunu yaşadım, şu şekilde çözdüm:

.parent {
  white-space: nowrap;
  display: table;
}

.child {
  display: block;
}

"beyaz boşluk: nowrap", çocuğun çocuklarının (eğer varsa) yeterli boşluk yoksa yeni satıra sarılmamasını sağlar.

"beyaz boşluk: nowrap" olmadan:

"beyaz boşluk: nowrap" ile:

düzenleme: benim için alt blok parçası olmadan da çalışıyor gibi görünüyor, bu yüzden sadece bu iyi çalışıyor gibi görünüyor.

.parent {
  white-space: nowrap;
  display: table;
}

— Çaylak
kaynak

1

Aşağıdakileri kullanabilirsiniz:

display: inline-block;

Bağlantılarda ve diğer öğelerde iyi çalışır.

— Bruno Leveque
kaynak