空的有序列表混亂CSS表佈局

爲什麼第一個表中的空無序列表將其他'表格單元格'中的列表向下推？空的有序列表混亂CSS表佈局

HTML

<div class="table"> 
    <div class="table-row"> 
     <div class="table-cell"> 
      <div> 
       <ol> 
        <li>an item</li> 
       </ol> 
      </div> 
     </div> 
     <div class="table-cell"> 
      <div> 
       <ol> 
       </ol> 
      </div> 
     </div> 
    </div> 
</div>

CSS

.table { 
    display: table; 
    width:100%; 
} 

.table-row { 
    display: table-row; 
} 

.table-cell { 
    display: table-cell; 
    border: 1px solid red; 
    width: 50%; 
} 

.table-cell > div { 
    border: 1px solid blue; 
    height: 100px; 
} 

.table-cell ol { 
    border: 1px solid black; 
}

在http://jsfiddle.net/facboy/7bs4xopg/完整的示例。第二個表格中的兩個列表都是我期望的佈局看起來如何

很明顯，我可能只是沒有空的<ol>和效果會是相同的，但我很好奇的原因。

來源

2014-09-11 Christopher Ng

這是由於浩表格單元格中的w基線是根據它們是否具有內嵌內容來計算的。該spec概括起來非常漂亮：

細胞的基線的基線第一在流動的細胞，或先在流錶行的單元，以先到者爲準line box。如果沒有這樣的線框或表格行，則基線是單元格框內容邊緣的底部。

由於您的表格單元格及其所有後代都沒有文本，因此它不會生成行框。您的空單元格中唯一的其他框分別是內部<div>和<ol>生成的塊框。這些箱子最外面的底部成爲基線。

然後該基線與另一個單元格中的文本對齊，但實際上並未影響該單元格的內部佈局。這會導致該單元被推下。

請注意，單獨沒有<ol>不會產生所需的效果，因爲內部<div>仍會劫持表格單元格的基準線。單元必須是完全空的，或者至少它的內容必須具有零高度。

來源

2014-09-11 11:54:17 BoltClock

感謝您的解釋！ – 2014-09-11 14:45:35

那是因爲你的細胞的垂直對齊方式默認設置爲baseline（你可以從綠線見截圖）

enter image description here

從而增加vertical-align: top到.table-cell

.table-cell { 
    ... 
    vertical-align: top; 
}

叉：http://jsfiddle.net/b86qyzc5/

來源

2014-09-11 11:48:49 fcalderan

也謝謝，雖然我很喜歡BoltClock答案中對規範的引用。 – 2014-09-11 14:46:12

空的有序列表混亂CSS表佈局

回答

相關問題