2012-07-02 54 views
0

我正在處理一個相當困難的樣式問題。我有一個包含在div標籤內的ul元素的集合。從視覺上看,每個ul應該在表格中顯示爲一行。結構如下:CSS - 樣式ul元素,就好像它們是錶行元素

<div class="tableElementEmulation"> 
    <ul class="trElementEmulation"> 
     <li class="tdElementEmulation">Some text</li> 
     <li class="tdElementEmulation">Some text</li> 
     <li class="tdElementEmulation">Some text</li> 
     <li class="tdElementEmulation">Some text</li> 
    </ul> 
</div> 

我需要對此結構進行樣式設置,使其像HTML表格一樣工作。這被證明是非常困難的,因爲table元素本身處理大量的表格格式而沒有任何額外的CSS。我不是一個CSS大師,所以複製這個功能到目前爲止還不是很成功。

很明顯,使用實際的HTML表格來實現這種格式會更容易,但我使用的插件僅適用於與上面列出的類似的結構。我被要求使用這個插件的頁面,所以只使用HTML表格是不幸的。 有沒有人有關於實現上面列出的這種html結構的表樣式的任何建議?

回答

4

HTML:

<div class="tableElementEmulation"> 
    <ul class="trElementEmulation"> 
     <li class="tdElementEmulation">Some text</li> 
     <li class="tdElementEmulation">Some text</li> 
     <li class="tdElementEmulation">Some text</li> 
     <li class="tdElementEmulation">Some text</li> 
    </ul> 
</div> 

CSS:

.trElementEmulation li { 
    list-style:none; 
    float:left; 
    padding: 5px 10px; 
    border: 1px solid #eee; 
} 

demo

+0

非常感謝,這真的很有幫助! – dsw88