css: div genişliğini kullanılabilir genişliğe genişletmeyi engelle

Div'in genişletilmesini nasıl engelleyebilirim? Öğelerin mevcut alanın% 100'ünü almaması ve çocukların sahip olduğu genişliğe sahip olmasını istiyorum. Ebeveyn divunu yatay olarak ortalamak için buna ihtiyacım var. Hile, alt öğelerin float: sol veya diplay: satır içi bloğu ve akışkan genişliğini paylaşması gerektiğidir, bu nedenle birkaç alt öğe öğesi olabilir.css: div genişliğini kullanılabilir genişliğe genişletmeyi engelle

Her satırı kendi div'sine yapıştıracağım, çünkü duyarlı tasarıma son verecek.

kaynak

2013-08-08 vlad

Orada çeşitli olasılıklar var: 'ekran: Bu (farkında için inline-block' iyidir [IE7 kesmek] (http://stackoverflow.com/a/6545033/870729)) –

"display: inline-block" öğesini üst öğeye ayarlayın ve bir kapsayıcı tarafından sarın "text-align: center;"; –

Bu önemsiz bir sorun gibi gözükse de, HTML'nizi göstermemize yardımcı olabilir. Karşılaştığınız meydan okuma. – isherwood

display: inline-bock kullanmayı denediniz mi? DIV, blok öğeleri olduğu için% 100 genişlik alacaktır.

kaynak

2013-08-08 19:43:56 mitch

+11

Bu bir yorum olmalı. – defaultNINJA

Bu, div'u daraltacak, ancak (kolayca) ortalanmayacak. –

display: table; kullanmalısınız. İçeriğinin boyutuna küçülecek ve belirli bir genişliğe sahip olmak zorunda kalmadan merkezlenip konumlandırabilirsiniz. Eğer gerçekten onun alt öğeleri etrafında çökmeye ebeveyn div istiyorsanız

DEMO http://jsfiddle.net/kevinPHPkevin/9VRzM/

kaynak

2013-08-08 19:49:41 Vector

float ayarlamayı deneyin: sol veya ekran: alt öğelere satır içi-blok, sorunlara neden olur – vlad

@vlad Aslında float: left' ve 'display: inline-block' ayarlamayı denedim ve bir sorun görmüyorum. Bu durumlarda, ana konteyner, çocuk öğelerinin mevcut genişliği doldurmasına izin vermek için olabildiğince genişleyecektir. Genişliği, ana kapsayıcı için maksimum genişlik özelliğini kullanarak sınırlayabilirsiniz. –

, daha fazla metin olduğunda hala genişler – IHeartAndroid

ve ardından istediğiniz (eğer başarmak için çalışıyoruz dayalı sebebi ne olursa olsun, için) Vektör adlı @, daha sonra div o merkezi Cevap açık, 'u margin: 0 auto ile kullanın.

div için, çocuklarınızın merkezini tutmaya çalıştığınız kabın tüm genişliğine genişletilmesinin yeterli olması durumunda, özel durumunuza bağlı olarak en az birkaç seçenek daha vardır.

text-align: center'u kullanabilirsiniz.

.content { 
 
    text-align: center; 
 
    border-style: solid; 
 
    border-width: thin; 
 
} 
 

 
.content span { 
 
    display: inline; 
 
    border-style: solid; 
 
    border-width: thin; 
 
}

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

Ayrıca elbette destekliyoruz tarayıcı uyumluluğu düzeyine bağlı olarak, justify-content: center ile display: flex yeni kullanabilirsiniz.

.content { 
 
    display: flex; 
 
    justify-content: center; 
 
    border-style: solid; 
 
    border-width: thin; 
 
} 
 

 
.content div { 
 
    border-style: solid; 
 
    border-width: thin; 
 
}

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

kaynak

2017-06-24 17:16:04

css: div genişliğini kullanılabilir genişliğe genişletmeyi engelle

cevap

İlgili konular