li元素顯示內嵌於列（網格）

我有<li>元素在<ol>之內，並且想要如下所示顯示它;有人可以給我的CSS代碼來實現這一目標嗎？li元素顯示內嵌於列（網格）

<ol> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    <li>7</li> 
    <li>8</li> 
    <li>9</li> 
    <li>10</li> 
    <li>11</li> 
    <li>12</li> 
</ol>

，我想將顯示如下：

http://www.jqueryscript.net/demo/Accessible-Touch-Friendly-Drag-Drop-Html-List-with-jQuery/

上面是一個例子，因此HTML看起來像這樣我已經產生這些<li>元素用PHP ，與jQuery，我正在工作渠道編輯器，並希望得到像這樣的形象。我嘗試了顯示內聯，寬度和高度，但沒有去，所以我不能得到它的工作。

來源

2014-10-07 user2631534

雖然不是IE的老版本的最佳選擇，但我知道實現所需結果的唯一方法是使用CSS3 column-count元素。

CSS

li{ 
    -webkit-column-count: 3; 
    -moz-column-count: 3; 
    column-count: 3; 
}

來源

2014-10-07 17:50:26 jleggio

第一：請把符合標準的CSS（非前綴版）* *後供應商前綴版本（以確保爲屬性成爲標準於供應商前綴版本將被覆蓋，而不是連續使用）。其次，它可能是最好的*而不是*指的是W3Schools，他們在這裏的聲譽很差（儘管近期有一些改進）。 – 2014-10-07 17:54:18

注意，並修復。謝謝！ – jleggio 2014-10-07 17:56:55

你非常歡迎，請注意，我並不打算說「不要發佈引用或鏈接到文檔」，（只是建議W3Schools鏈接歷史上已經獲得了低票和批評，也許現在，但我'米不確定）。我傾向於鏈接到MDN的文檔（爲了便於閱讀）（['column-count']（https://developer.mozilla.org/en-US/docs/Web/CSS/column-count）），或W3C的文檔（技術準確性）['column-count']（http://dev.w3.org/csswg/css-multicol/#cc）。 – 2014-10-07 18:00:31

li元素顯示內嵌於列（網格）

回答

相關問題