Soru Ilaç içeriği daha büyük değil nasıl?


Benzer bir düzenim var:

<div>
    <table>
    </table>
</div>

Ben için isterim div sadece benim kadar genişlemeyi table olur.


1693
2018-01-16 16:03


Menşei


Etkisi "shrinkwrapping" olarak adlandırılır ve cevap olarak, bunlardan birini seçmek için yan etkileri olan bunu (float, inline, min / max-width) yapmanın birkaç yolu vardır. - annakata


Cevaplar:


Çözüm sizin div için display: inline-block.


2040
2017-10-12 16:47



@ leif81 kullanabilirsiniz span ya da div veya ul ya da başka bir şey, önemli olan minimum genişlikte olmasını istediğiniz konteyner için CSS özelliğine sahip display: inline-block - miahelf
Birisi merak ederse: o zaman masanın üst kısmını ortada "metin-hizala: ortala" ve "metin-hizala: sol" ayarlayarak ortalayabilirsiniz (ör. <body style = "text-align: center"> < span style = "text-align: left; ekran: satır içi-blok;"> <table> ... </ table> </ span> </ body>) - bernstein
Açıkça benim için krom üzerinde çalışmıyor, ancak beyaz boşluk kullanarak çalışıyor: nowrap; - albanx
Lütfen bir kez sahip olduğunuza dikkat edin. display: inline-block özellik ayarlamak margin: 0 auto; beklendiği gibi çalışmayacak. Bu durumda ebeveyn kabı varsa text-align: center; sonra inline-block eleman yatay olarak merkezlenecektir. - Savas Vedova
inline-block benim için çalışmadı, ama inline-flex DID. - mareoraft


CSS'nin büzülecek genişliğe bürünme çağrılarını içeren bir blok elemanını istiyorsunuz ve bu tür bir şeyi elde etmek için mübarek bir yol sunmuyor. CSS2'de shrink-to-fit bir hedef değildir, ancak tarayıcının "ince havadan bir genişlik" elde etmesi gereken bir durumla uğraşmak anlamına gelir. Bu durumlar:

  • şamandıra
  • kesinlikle konumlandırılmış eleman
  • satır içi blok elemanı
  • masa elemanı

belirtilen genişlikte olmadığında. CSS3'te ne istediğinizi eklemeyi düşündüklerini duydum. Şimdilik, yukarıdakilerden biriyle yapın.

Özelliği doğrudan ortaya çıkarmama kararı tuhaf görünebilir, ancak iyi bir sebep vardır. Bu pahalı. Küçültmek için sığdırmak, en az iki kez biçimlendirmek anlamına gelir: genişliğini bilene kadar bir öğeyi biçimlendirmeye başlayamazsınız ve tüm içeriğin içinden geçerek genişliğini hesaplayamazsınız. Ayrıca, birinin düşünebileceği sıklıkta küçültme elemanına ihtiyaç duyulmaz. Masanızın etrafında neden ekstra div'a ihtiyacınız var? Belki tablo başlığı, ihtiyacınız olan her şeydir.


308
2018-01-16 16:40



şöyle söylerdim inline-block tam olarak bunun için tasarlanmıştır ve sorunu mükemmel bir şekilde çözer. - miahelf
Ben css4 ekleyerek düşünüyorum ve olurdu content-box, max-content, min-content, available, fit-content, auto - Muhammad Umer
Yeni fit-content anahtar kelime (bu cevabın ilk yazıldığı sırada değil, hala var) tam olarak desteklenmiyor) bir öğeye "shrink-to-fit" boyutlandırmayı açık bir şekilde uygulamanıza izin verir, burada yalnızca destekli tarayıcıları hedefleyebilecek kadar şanslıysanız, burada önerilen bilgisayarlardan herhangi birine olan ihtiyacı ortadan kaldırır. +1 yine de; Bunlar şimdilik şimdilik faydalı! - Mark Amery
float Yapmam gerekeni yaptım! - nipunasudha


Kullanmayı düşünüyorum

display: inline-block;

çalışır, ancak tarayıcı uyumluluğu hakkında emin değilim.


Başka bir çözüm, div başka div (blok davranışını korumak istiyorsanız):

HTML:

<div>
    <div class="yourdiv">
        content
    </div>
</div>

CSS:

.yourdiv
{
    display: inline;
}

196
2018-01-16 16:41



Tarayıcı uyumluluk sorusunu yanıtlamak için: bu, DIV öğelerinde IE7 / 8 ile çalışmaz. SPAN elemanlarını kullanmalısın. - Matt Brock
@feeela - Ben her zaman zumun önüne * ekledim. *display: inline; *zoom: 1;. Bu özel durum için test etmedim, ama geçmişte her zaman hasLayout hack sadece IE7 veya IE7-IE8 (veya IE8 quirks!) İçin gerekli olduğunu buldu. - robocat
@robocat Evet, gerçekten bir geçici çözüm var. inline-block IE 7'de etkinleştirildi. - feeela
@feela - Yorumun bana bir anlam ifade etmiyor! Ben de zumun önünde * koyarak öneriyorum. * Yakınlaştırma: 1; - robocat
Lütfen satır içi blok iş çözümünüzün nedenini açıklayınız. - HelloWorldNoMore


display: inline-block öğenize ekstra bir marj ekler.

Bunu tavsiye ederim:

#element {
    display: table; /* IE8+ and all other modern browsers */
}

180
2018-05-12 23:39



+1 - Bu, elementlerin merkezlenmesini sağlayan modern tarayıcılar için en iyi ve en temiz çözümdür. İle şartlı bir yorum position: absolute <IE8 için gereklidir. - uınbɐɥs
belirtme display: inline-block herhangi bir boşluk eklemez. Ancak CSS, satır içi öğeler arasında gösterilecek boşlukları ele alır. - feeela
Lütfen ekran çözümünüzün nedenini açıklayınız: tablo çalışır. - HelloWorldNoMore
satır içi bloğu, öğeyi ana öğesinde konumlandırmayı imkansız kılar (örneğin, bir metin hizalaması varsa: ortada, sola yapışmazsa): tablo mükemmel :) - FlorianB
Eğer varsa bu yoldur position: absolute - m4heshd


display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

Foo Hack - inline-blok Styling için Çapraz Tarayıcı Desteği (2007-11-19).


82
2017-08-25 19:36



Bu sorunu yaşayan herkes bu stilleri eklemelidir. Firefox kullanılmadığında kenar boşluk ekledi -moz-inline-stack - Justin


Benim için ne işe yarıyor:

display: table;

içinde div. (Test edildi Firefox ve Google Chrome).


74
2018-01-11 12:01



Evet, özellikle de kenar boşluğuyla merkezlemeniz gerekiyorsa: auto. Bu durumda satır içi blok çözüm değildir. - Zsolt Szatmari
Ayrıca, bu elemanın içinde dolgu çalışması yapmak isterseniz, bunu ayarlamanız gerektiğini unutmayın. border-collapse: separate; tarzı. Birçok tarayıcıda varsayılan değerdir, ancak önyükleme değerini sıfırlayan önyükleme gibi css çerçeveleridir. collapse. - djxak
Bir Windows Mobile 6.5 telefonunda 2009 yılında yapılan MSIE 6'da test edildi: tam genişlikte bir div'a (bir telefonda bir sorun olmaması muhtemel) zarif bir şekilde düşüyor. Birisi Internet Explorer'ın bir sürümünü bir masaüstünde 8'den daha az kullanıyorsa, desteklenmeyen bir işletim sistemi kullanıyorlar (IE6 XP ile geldi, IE7 Vista ile geldi); Bu makinede internete güvenli bir şekilde devam etmek istiyorlarsa, GNU / Linux'a yükseltme yapmalarını söyleyen bir sayfaya yönlendiririm. - Silas S. Brown


Deneyebilirsin fit-content (CSS3):

div {
  width: fit-content; 
  /* To adjust the height as well */ 
  height: fit-content;
}

61
2018-05-27 00:41



IE'de desteklenmeyen caniuse.com/#search=fit-content :( - Bartek Skwira
@BartlomiejSkwira IE veya Eclipse'de çalışan herhangi bir ikame? inline-blok olarak bana çalışmayan diğer bir çözüm .. \ - DAVIDBALAS1
Bu çok mantıklı, elbette destek yok. - Sava B.


İki tane daha iyi çözüm var

  1. display: inline-block;

    VEYA

  2. display: table;

Bu ikisinden display:table; daha iyi. 

İçin display:inline-block; Ekstra alanı düzeltmek için negatif kenar boşluğu yöntemini kullanabilirsiniz.


53
2018-05-10 20:16



Nedenini açıklıyor musunuz? display:table daha iyi? - Nathaniel Ford
Ekran için: satır içi blok, ekstra aralığı düzeltmek için negatif kenar boşluğu yöntemini kullanmanız gerekir. - Shuvo Habib
@NathanielFord, display:table Öğeyi Blok biçimlendirme bağlamında bırakır, böylece konumunu her zamanki gibi kenar boşluklarıyla vb. kontrol edebilirsiniz. display:-inline-*öte yandan, öğeyi Inline formatlama içeriğine koyar ve tarayıcının, etrafındaki anonim blok sarmalayıcıyı oluşturmasına ve satır içi font / satır yüksekliği ayarlarına sahip satır kutusunu içermesine ve bloğun bu satır kutusuna eklenmesine neden olur (hizalama varsayılan olarak varsayılan olarak dikey olarak). Bu daha fazla "sihir" ve dolayısıyla potansiyel sürprizleri içerir. - Ilya Streltsyn


Sorunun cevabı ileride arkadaşım ...

"intrinsic" en son CSS3 güncellemesiyle geliyor

width: intrinsic;

ne yazık ki IE onunla geride kaldı, bu yüzden henüz desteklemiyor

Daha fazlası: CSS İntrinsik ve Dışsal Boyutlandırma Modülü Seviye 3 ve Kullanabilirmiyim?: İçsel ve Dışsal Boyutlandırma.

Şimdilik memnun olmalısınız <span> veya <div> ayarlanır

display: inline-block;

41
2017-12-11 13:07



intrinsic bir değer olarak standart değildir. Aslında width: max-content. Bakın Bunun üzerine MDN sayfası veya zaten bağlantılı taslak. - maryisdead