如何建立使用UL和李

我想創建一個表像下面一樣使用UL和李的Html elements.I如何建立使用UL和李

label1  label2   label3 
    abc   123    tomo

的一個結構不想使用HTML表，因爲狀結構表有一個按鈕表示添加新行，在運行時添加新行。此外，我會讓整個列表可重新排列購買提供一個可重新排列的按鈕。

來源

2011-07-15 Saurabh Kumar

如果您需要顯示錶格數據，請使用表格。你仍然可以用表格描述你所描述的一切。 – Oded

您可以浮動每ul到左側，float:left

來源

2011-07-15 13:47:30 Phil

鏈接正在重定向。 –

ty，不知道爲什麼那個鏈接死了哈哈 – Phil

谷歌對電網無表。

這個想法是使用CSS樣式來佈局網格結構中的容器/控件。

一些鏈接：

http://www.nd.edu/~tlehman/presentations/css_magic/grid/grid1.shtml

http://www.alistapart.com/articles/practicalcss/

http://www.dailycoding.com/Posts/layout_form_without_tables_with_css_trick.aspx

來源

2011-07-15 13:47:51 Satish

你應該以創建表:)

在這裏，你有一個函數將行添加到使用表表

/* 
Add a new table row to the bottom of the table 
*/ 

function addTableRow(jQtable){ 
    jQtable.each(function(){ 
     var $table = $(this); 
     // Number of td's in the last table row 
     var n = $('tr:last td', this).length; 
     var tds = '<tr>'; 
     for(var i = 0; i < n; i++){ 
      tds += '<td> </td>'; 
     } 
     tds += '</tr>'; 
     if($('tbody', this).length > 0){ 
      $('tbody', this).append(tds); 
     }else { 
      $(this).append(tds); 
     } 
    }); 
}

，你可以看到它在這裏：http://snipplr.com/view/13326/add-table-row-to-the-bottom-of-a-table/

來源

2011-07-15 13:49:16 JAiro

等，這是個問題嗎？哈哈，我很困惑。 – Phil

是的，他想要使用ul和li，因爲他不知道如何在表中添加行。 – JAiro

HTML

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <div class="d-table"> 
    <ul class="d-column"> 
     <li> </li> 
     <li> </li> 
     <li> </li> 
     <li> </li> 
     <li> </li> 
     <li> </li> 
    </ul> 
    <ul class="d-row"> 
     <li> </li> 
     <li> </li> 
     <li> </li> 
     <li> </li> 
     <li> </li> 
     <li> </li> 
    </ul> 
    <ul class="d-row"> 
     <li> </li> 
     <li> </li> 
     <li> </li> 
     <li> </li> 
     <li> </li> 
     <li> </li> 
    </ul> 
    <ul class="d-row"> 
     <li> </li> 
     <li> </li> 
     <li> </li> 
     <li> </li> 
     <li> </li> 
     <li> </li> 
    </ul> 
    </div> 
</body> 
</html>

CSS

.d-table { 
    min-width: 300px; 
    min-height: 300px; 
    background: lightgrey; 
    display: block; 
    width: 1px solid red; 
} 

.d-table ul { 
    list-style-type: none; 
} 

.d-column li { 
    padding: 0px; 
    display: inline-block; 
    border: 1px solid blue; 
    background: grey; 
    width: 50px; 
    height: 20px; 
} 

.d-row li { 
    padding: 0px; 
    display: inline-block; 
    background: lightgrey; 
    border: 1px solid red; 
    width: 50px; 
    height: 20px; 
}

在JavaScript中，你可以有一個for循環來添加更多的行。這只是HTML和CSS。

來源

2013-09-09 21:00:37 Knowitall

如何建立使用UL和李

回答

相關問題