如何設置我的無序列表的樣式？

我只有一個<UL>下，我們有<LI>如何設置我的無序列表的樣式？

<ul> 
    <li>1<li> 
    <li>2<li> 

    <li>3</li> 
    <li>4<li> 

</ul>

組現在我想向他們展示的表，請幫我用CSS，我們如何能顯示爲一個表上面UL /李在下表格式，2李在一個TR（二TD）等設置....

enter image description here

來源

2012-12-11 user584018

你想通過使用表而不是無序列表來完成什麼？ –

你能說清楚你想要做什麼嗎？ – Kermit

你不能讓CSS做HTML工作。然而，你可以做的是造型你的無序列表，這樣它將被表示爲表格。 – raina77ow

嗯，這裏是一個可能的解決方案：

ul { 
    width: 450px;   /* change it to whatever you like */ 
    position: relative; 

    /* these should be probably already set up by `reset.css` */ 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

ul:before, ul:after { 
    text-align: center; 
    display: block; 
    border: 1px solid black; 
    border-bottom: 0; 
    width: 48%; 
} 

ul:before { 
    content: 'col1'; 
    border-right: 0;  
} 

ul:after { 
    content: 'col2'; 
    position: absolute; 
    top: 0; 
    left: 48%; 
    margin-left: 1px;  
} 

li { 
    text-align: right; 
    width: 48%; 
    float: left; 
    border: 1px solid black; 
    margin-bottom: -1px; 
} 

li:nth-child(even) { 
    margin-left: -1px; 
}

它的工作原理（JSFiddle;在Chrome，Firefox和Opera測試; nth-child(even)選擇在IE8顯然失敗了，所以你必須與類或其他手段來效仿;但除此之外它仍然堅實），但我承認我對此感到內疚。）

P.S.如果你想填充添加到「細胞」的內容，不要忘記改變它們的寬度，以及像here：

li { 
    width: 47%; 
    padding-right: 1%; 
}

來源

2012-12-11 17:31:38 raina77ow

對於我的（輕微）娛樂，它實際上[可以正常工作]（http：// jsfiddle .net/Unwh6/4 /）與$ .sortable：至少該表不開始分崩離析。） – raina77ow

這是非常令人印象深刻的。 :)然而，正如預期的那樣，它按照單元格對錶格進行排序，而不是按行（我猜是OP的意圖）。 – Steve

@raina ...哇完美的我的scanario！ – user584018

無法通過display: table屬性轉換一個列表（包含超過2項）到2列因爲你需要一些元素來充當表格行。如果沒有元素充當表格行，則設置爲display: table-cell的所有相鄰元素都將包含在無法以任何方式修改或設置樣式的匿名錶格行元素中。

你唯一的選擇是要麼改變標記（用列表的表格或列表），或使用不同的方法來你的CSS：在li小號要麼漂浮/ inline-block的或使用的ul的columns財產。

來源

2012-12-11 17:29:51 cimmanon

這是一個非常晚的答案，但我認爲這是一個共同的話題。 Here's a codepen I made。

顯然這只是一個起點。它還有一些如何添加bg或邊框等樣式的示例。例如，如果「單元格」包含一些任意內容，則必須調整維度。我用這樣的代碼縮略圖畫廊，例如，在這裏你不必擔心邊界或BGS這是相當基本的代碼（例如是2×3的表格，請參閱codepen）：

ul{ 
    list-style:none; 
} 

ul li{ 
    float:left; 
    padding:10px; 
    border-bottom:1px solid #000; 
    border-right:1px solid #000; 
} 

ul li:nth-child(3n){ 
    background-color:#888; 
} 

ul li:nth-child(3n+1){ 
    clear:both; 
    border-left:1px solid #000; 
    background-color:#ccc; 
} 

ul li:nth-child(-n+3){ 
    border-top:1px solid #000; 
}

希望能幫助到你。

來源

2014-08-11 10:27:32 Stratboy

如何設置我的無序列表的樣式？

回答

相關問題