无序列表帮助

我需要为下拉菜单循环链接数组。无序列表帮助

下拉菜单是固定高度格。我需要链接从左上向下填充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

无序列表帮助

回答

相关问题