顯示：在新行

這裏表單元格是什麼，我的意思是一個示例代碼：顯示：在新行

HTML

<ul class="table"> 
    <li class="table-cell"></li> 
    <li class="table-cell"></li> 
    <li class="table-cell"></li> 
    <li class="table-cell"></li> 
</ul>

CSS：

.table { 
    display: table; 
} 

.table-cell { 
    display: table-cell; 
    width: 25%; 
}

問：我怎樣才能使第三和第<li>（表單元格）在寬度爲50％的新行上顯示？

問：有沒有一種方法只使用CSS而不使用jQuery或Javascript？

來源

2013-02-08 codiac

簡單的答案是：你不能，至少不能與列表。將其顯示設置爲table-cell的相鄰元素視爲屬於同一行（即使未提供行元素，也會爲您創建一個匿名元素）。由於列表不允許在ul和li之間包含任何其他標籤，因此這對列表來說是不可能的。你將不得不使用不同的標記或不同的樣式。

如果您不想修改標記，以下是您的選項。在列表項

inline-block的：http://jsfiddle.net/XNq74/1/

li { 
    display: inline-block; /* could use floats here instead */ 
    width: 40%; 
}

CSS列將是一個合理的選擇：http://jsfiddle.net/XNq74/

ul { 
    columns: 2; 
}

http://caniuse.com/#feat=multicolumn

實現Flexbox也將工作，並且可以在使用與內嵌塊組合：http://jsfiddle.net/XNq74/2/

ul { 
    display: flex; 
    flex-flow: row wrap; 
} 

li { 
    flex: 1 1 40%; 
}

http://caniuse.com/#search=flexbox

來源

2013-02-08 13:07:15 cimmanon

內聯塊使對象之間的4像素的差距，如果我記得右。我需要他們成爲無縫的。至少在同一行上的對象也必須具有相同的高度（動態高度）。 – codiac 2013-02-08 18:01:20

不，空格在內聯塊對象之間產生4像素的差距，你可以做很多事情來擺脫它（參見http://css-tricks.com/fighting-the-space-between-inline-block-elements /）。由於他們必須是相同的高度，flexbox是你的男人：http://jsfiddle.net/XNq74/11/ – cimmanon 2013-02-08 19:53:32

感謝您的幫助和資源。 Flexbox具有較低的瀏覽器支持。爲了爭取內聯塊元素之間的空間，這是一個很好的來源。我只想到 - 邊際。然而，這並不能解決相同的高度問題，同時也與梯度保持良好的兼容性（使用-margin +填充和隱藏溢出方法的示例）。 – codiac 2013-02-09 08:07:27

-4

ul.table li+li+li { /** your CSS code **/ } This one is for the third element 


ul.table li.last { /** your CSS code **/ } This one is for the fourth element

來源

2013-02-08 12:47:12

顯示：在新行

回答

相關問題