無序列表幫助

我需要爲下拉菜單循環鏈接數組。無序列表幫助

下拉菜單是固定高度格。我需要鏈接從左上向下填充div，然後當列處於最高高度（由周圍div設置）時，它將從頂部向下開始一個新列，如下所示。

link one link four link seven 
link two link five link eight 
link three link six link nine

我試圖使用<ul> <li></li> </ul>，但我不能讓我的身邊，我怎麼回事樣式它的頭上？如果我將它浮起來，它會左對齊，如果我不這樣做，它不會向左浮動開始一個新的列？

它是一個LIQUID文件，所以我是有限的。（液體作爲Shopify模板文件類型）

來源

2011-03-20 Charles Marsh

'li'元素的數量會不一樣，還是一直是9？ – 2011-03-20 17:34:33

你可以用CSS3列做到這一點：http://www.quirksmode.org/css/multicolumn.html

否則，你就需要來包裝這是你div的高度和浮那些含有元素你行。

我能看到的唯一方法就是使用一些JavaScript，但如果您沒有使用CSS3列，您仍可能需要插入某種額外的標記來完成此操作。

來源

2011-03-20 17:24:27

~~恐怕這樣的流程在HTML/CSS中不可能像現在這樣。事情從左到右，然後從上到下。不是相反的。~~對。 CSS3列。不知道這些。：P Thanks, Chris!

總而言之，雖然CSS3列仍然沒有得到廣泛的支持，但最簡單的解決方法是給每個項目一個固定的高度，然後你可以計算你的服務器端代碼中的每一列。只要發出一個標準<table>與他們並完成它。

否則，您可以使用Javascript來測量每個項目並在客戶端執行佈局。

來源

2011-03-20 17:30:43

如果您想要使用CSS3的替代方法，請嘗試查看此A List Apart article on multi-column lists，它有多種將列表分成多列的方法。我不會發布具體的解決方案，因爲它取決於你的情況，但我已經嘗試了方法6，它工作。

來源

2011-03-20 17:54:58

我不認爲這是一般的答案，因爲你正在尋找，但假設某些常量（總是9項;總是3列3項）這裏是一個使用相對定位實現想要的效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
    <head> 
     <title>Unordered list help/title> 
     <style type="text/css"> 
      #myList { 
       width:301px; 
       height:61px; 
      } 
      #myList li + li + li + li { 
       width:100px; 
       float:right; 
       clear:right; 
       position:relative; 
       top:-60px; 
       left:-100px; 
      } 
      #myList li + li + li + li + li + li + li { 
       position:relative; 
       left:0px; 
       top:-120px; 
      } 
      #myList li:first-child, 
      #myList li:first-child + li, 
      #myList li:first-child + li + li { 
       width:100px; 
      } 
     </style> 
    </head> 
    <body> 
     <ul id="myList"> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
      <li>Four</li> 
      <li>Five</li> 
      <li>Six</li> 
      <li>Seven</li> 
      <li>Eight</li> 
      <li>Nine</li> 
     </ul> 
    </body> 
</html>

來源

2011-03-20 18:34:42

無序列表幫助

回答

相關問題