Wypełnienie na zakotwiczeniu na liście nie zmienia rozmiaru elementu listy.

Question

Chciałbym wiedzieć, dlaczego ustawienie pionowego wypełnienia na kotwicy zagnieżdżonej w nieuporządkowanym łączu nie zmienia rozmiaru pozycji na liście. Jak widać na jsfiddle, zakładki są większe niż element ul, więc nakładają się na element div znajdujący się pod spodem.

Spodziewam się, że li, a także ul, osiągną wysokość tak wysoką, jak zawartość, więc div z akapitem zostanie przesunięty w dół.

HTML

<div class="tab-row"> 
    <ul> 
     <li> 
      <a href="#"><span>Tab 1</span></a> 
     </li> 
     <li> 
      <a href="#"><span>Tab 2</span></a> 
     </li> 
    </ul> 
</div> 
    <div class="tab-content"> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla tincidunt semper quam. Suspendisse potenti. Donec adipiscing consequat erat. 
      Morbi semper, libero vel pulvinar tincidunt, lorem lorem scelerisque felis, sed tempor dolor dolor non felis. Quisque eu est. 
      Quisque blandit, pede non commodo convallis, purus elit pellentesque neque, in tempor libero dolor quis quam. Quisque eros. Vivamus porttitor. 
      Aenean quis odio. Cras commodo risus ac est. Fusce molestie, lacus at sagittis fermentum, dolor eros ultrices tellus, ac sollicitudin pede risus.</p> 
    </div> 
</div> 

CSS

ul { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 
.tab-row li { 
    display: inline; 
} 
.tab-row li a { 
    border: 1px solid #CCCCCC; 
    padding: 10px; 
    text-decoration: none; 
} 
.tab-content { 
    border1px solid #CCCCCC; 
} 
.tab-content p { 
    text-align: justify; 
    margin: 10px; 
} 

Answer 1

ponieważ jesteś dodając dopełnienie do elementu liniowego. Dodaj:

.tab-row li a { 
    display: inline-block; 
} 

Lub float it to the left.

dlaczego nie ma tutaj ustawienia wypełnienia elementu liniowego?

Do wstawianych elementów można wstawiać tylko lewy i prawy margines. To są specyfikacje. Każda właściwość powinna być zastosowana "W linii", linia jest zdefiniowana przez właściwość wysokość-linia elementu nadrzędnego. Przeczytaj więcej na ten temat: in this article.

dlaczego po prostu opuścił to działa?

Pływaki zamieniają go w element blokowy.