Dlaczego zawartość inline-block wpływa na jego pozycję w kontenerze

Here's a fiddle that shows my code in action Dlaczego zawartość inline-block wpływa na jego pozycję w kontenerze

Wynik wydaje się szalony do mnie: w Chrome drugi przycisk jest nieco powyżej pierwszego. W przeglądarce Firefox jest nieco poniżej.

<div id="accounts"> 
    <button class="account"> 
    <h1>VISA Card</h1> 
    <span class="balance">-433.18</span> 
    </button> 
    <button class="account"> 
    <h1 class="plus"><i class="icon icon-plus-sign"></i></h1> 
    <span class="plus-text">Add Account</span> 
    </button> 
</div>

Co jest jeszcze bardziej mylące jest to, że wyściółka na h1.plus wpływa na pozycję całej div.

Co się tutaj dzieje? Chcę, aby dwa przyciski pojawiały się na tej samej linii i po prostu nie zmieniaj tego, dlaczego tak nie jest. Czy jest to błąd w silniku renderowania?

AKTUALIZACJA: Narendra zasugerował łatwą poprawkę - float: opuścił przyciski. Chcę się dowiedzieć, dlaczego to niedopasowanie ma miejsce przede wszystkim.

Źródło

2013-06-27 Paul

Używasz display:inline-block, więc przyciski są wyrównane przez ich vertical-align nieruchomości, która domyślnie baseline.

Jest to schemat z specs który ilustruje dokładnie, że:

enter image description here

można zobaczyć w dwóch pierwszych polach jak wyściółka i rozmiar czcionki zawartości wpływa na pozycjonowanie.

Jako poprawkę użyj vertical-align: top lub bottom lub nawet middle.

Edit: Obraz jest od tabeli sekcji i the situation Slighty jest różny dla inline-bloków.

Źródło

2013-06-27 07:29:16 user123444555621

To musi być to. Dzięki za ważenie. Linia bazowa komórki jest określona przez jej zawartość. Spec mówi "Linia bazowa komórki jest linią bazową pierwszego wiersza tekstu w komórce", chociaż po niektóre eksperymenty Nie jestem przekonany, że tak jest, Różnica między FF a Chrome była spowodowana różnymi domyślnymi stylami przycisków w dwóch przeglądarkach – Paul

@Paul Niezupełnie. Podłączyłem do sekcji * table * specyfikacji, ponieważ zawiera ona ładną Jednak sytuacja jest nieco inna [w przypadku bloków wbudowanych] (http://www.w3.org/TR/CSS2/visudet.html#leading): "* Linią bazową" bloku inline "jest linii bazowej ostatniego pola liniowego w normalnym przepływie, chyba że nie ma ani linii przepływu w linii lub, jeśli jego właściwość "przelewu" ma wartość obliczoną inną niż "widoczna", w którym to przypadku linia bazowa jest krawędzią dolnego marginesu. * "Zobacz także ten przykład: http://jsfiddle.net/Gq3U8/26/ – user123444555621

@ user123444555621, jest to jeden z najlepsze pytania, jakie kiedykolwiek znalazłem. Dziękuję, naprawdę mi pomogło! – gnclmorais

zobacz poniżej kodu

button.account { 
    display: block; 
    float: left; 
    height: 80px; 
    margin: 10px 10px; 
    padding: 10px 5px; 
    width: 170px; 
} 
.account h1 { 
    font-size: 16px; 
    height: 16px; 
    margin: 0 0 5px; 
    padding: 4px 0 2px; 
} 
.account .balance { 
    display: block; 
    font-size: 24px; 
} 

.account h1.plus { 
    font-size: 24px; 
    padding-top: 0px; 
}

Oto skrzypce http://jsfiddle.net/Gq3U8/13/

Źródło

2013-06-27 03:38:07 Narendra

Dzięki, eksperymentowałem trochę z twoim kodem, a jedyną konieczną zmianą jest float: left ;. Wszelkie pomysły, dlaczego nie działa bez niego? – Paul

float: left powoduje, że elementy układają się od lewej strony okna. – Narendra

Wiem, co unoszą się: w lewo. Ale dlaczego nie działa bez niego? Jednym problemem z floatem jest to, że nie rozciągają pojemnika. Dodaj obramowanie do kont div # lub niektórych treści u dołu strony, a zobaczysz, jak się sprawy rozpadają. – Paul

Dodaj to do swojej button.account: vertical-align: middle;.

Można również stracić właściwość display: inline-block;, ponieważ nie jest potrzebna.

Źródło

2013-06-27 04:01:33 Gimmy

vertical-align: middle worked, thanks. Inną opcją jest ".konto * {line-height: 20px; } Ale dlaczego? – Paul

-1

Jeśli używasz inline-block, głównym problemem jest biały znak (zobaczysz domyślny margines wokół elementu). Aby to naprawić, po prostu dodaj vertical-align:top, zamiast używać float:left. Wyrównuje element do góry.

.account { 
    display: inline-block; 
    vertical-align: top; /*add this one*/ 
    margin: 10px 10px;  /*remove this one then can see whitespace*/ 
}

Źródło

2013-06-27 06:14:31

Dlaczego zawartość inline-block wpływa na jego pozycję w kontenerze

Odpowiedz

Powiązane problemy