css: zapobiec rozszerzeniu szerokości div do dostępnej szerokości

Jak mogę zapobiec rozszerzaniu elementu div? Chcę, żeby div z elementami nie zajmował 100% dostępnej przestrzeni i miał szerokość, którą mają dzieci. Potrzebuję tego do centrowania div jednostki nadrzędnej w poziomie. Sztuczka polega na tym, że elementy potomne powinny mieć wspólny float: left lub diplay: inline-block i szerokość płynu, więc może istnieć kilka rzędów elementów potomnych.css: zapobiec rozszerzeniu szerokości div do dostępnej szerokości

Nie mogę zawinąć każdego wiersza we własny div, ponieważ spowoduje to przerwanie responsywnego projektu.

Źródło

2013-08-08 vlad

jest kilka możliwości: 'display: inline-block' jest dobra na to (być świadomi [IE7 siekać] (http://stackoverflow.com/a/6545033/870729)) –

Ustawienie 'display: inline-block' na rodzica i zawijanie go przez kontener ma' text-align: center; ' –

Ponieważ wydaje się to banalnym problemem, może pomóc w wyświetleniu kodu HTML, abyśmy mogli zobaczyć, co wyzwanie, przed którym stoisz. – isherwood

próbowałeś używać display: inline-bock? DIV przejmie 100% szerokości, ponieważ są elementami blokowymi.

Źródło

2013-08-08 19:43:56 mitch

+11

To powinien być komentarz. – defaultNINJA

Spowoduje to złożenie elementu div, ale nie będzie (łatwo) wyśrodkowany. –

Powinieneś użyć display: table; Skurczy się do rozmiaru swojej zawartości, a także może być wycentrowany i pozycjonowany bez konieczności przydzielania danej szerokości.

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

Źródło

2013-08-08 19:49:41 Vector

spróbuj ustawić float: left lub display: wbudowany blok do elementów potomnych, to spowoduje problemy – vlad

@vlad Naprawdę próbowałem ustawić 'float: left' i' display: inline-block' i nie widzę problemu. W takich sytuacjach pojemnik nadrzędny rozszerzy się tak bardzo, jak to możliwe, aby elementy podrzędne wypełniły dostępną szerokość. Można ograniczyć szerokość za pomocą właściwości maximum-width dla kontenera nadrzędnego. –

nadal rozwija się, gdy jest więcej tekstu – IHeartAndroid

Jeśli naprawdę chcesz rodzica div aby zwinąć wokół jego elementów podrzędnych (z jakiegokolwiek powodu, w oparciu o to, co starasz się osiągnąć), a następnie chcesz wyśrodkować że div, następnie @ VECTOR odpowiedź jest na miejscu, użyj display: table z margin: 0 auto.

Jeśli jest w porządku, aby div pozostał rozszerzony na całą szerokość pojemnika, w którym próbujesz wyśrodkować swoje dzieci, to masz co najmniej kilka dodatkowych opcji, ponownie w zależności od konkretnej sytuacji. Można używać .

.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>

Można również użyć nowszych display: flex z justify-content: center, w zależności od poziomu zgodności przeglądarki jesteś nośnej, oczywiście.

.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>

Nie

Źródło

2017-06-24 17:16:04

css: zapobiec rozszerzeniu szerokości div do dostępnej szerokości

Odpowiedz

Powiązane problemy