Html 如何 CSS 一个两列的项目列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/974313/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to CSS a two column list of items?
提问by Alex Angas
I need to display a two column list of items according to the following rules:
我需要根据以下规则显示两列项目列表：
- Container for the columns has fluid width
- Width of both columns needs to be equal
- Items are dynamically rendered and at least one will be displayed
- Item ordering needs to flow down the left column first, then the right
- Items need to line up evenly across the bottom or in the case of an odd number the extra item should show in the left column
- 列的容器具有流体宽度
- 两列的宽度需要相等
- 项目是动态呈现的，至少会显示一个
- 物品排序需要先从左列向下流，然后是右列
- 项目需要在底部均匀排列，或者在奇数的情况下，额外的项目应显示在左栏中
Here is an example:
下面是一个例子：
~ Item 1 | ~ Item 6
~ Item 2 | ~ Item 7
~ Item 3 | ~ Item 8
~ Item 4 | ~ Item 9
~ Item 5 |
The HTML can be anything as long as it solves this problem. I'm restricted to using XSLT to wrap HTML around what the server spits out. I have access to two XSLT parameters: one that tells me the current item number and one that tells me how many items there are.
HTML 可以是任何东西，只要它能解决这个问题。我仅限于使用 XSLT 将 HTML 包裹在服务器吐出的内容周围。我可以访问两个 XSLT 参数：一个告诉我当前的项目编号，另一个告诉我有多少个项目。
My CSS skills are basic/intermediate and I don't know where to start here. Any ideas on whether this is achievable and how to do it?
我的 CSS 技能是基础/中级，我不知道从哪里开始。关于这是否可以实现以及如何实现的任何想法？
Update:
更新：
Thanks for the answers. Consensus seems to be either use the A List Apartarticle or a table which I'd prefer as it's simpler. The problem with the table is that the server gives me the items in sorted order. To use a table would mean XSLT trickery to re-sort, wouldn't it?
感谢您的回答。共识似乎是使用A List Apart文章或我更喜欢的表格，因为它更简单。该表的问题在于服务器按排序顺序为我提供了项目。使用表格意味着重新排序的 XSLT 技巧，不是吗？
<tr>
<td>Item 1</td>
<td>Item 4</td>
</tr>
<tr>
<td>Item 2</td>
<td>Item 5</td>
</tr>
<tr>
<td>Item 3</td>
<td> </td>
</tr>
回答by guymac
回答by Tomalak
I know that people dismiss HTML table based layouts, but what the heck. They work. If you are vain, you are free to go the extra mile and find a pure CSS based way to do it. :-)
我知道人们不理会基于 HTML 表格的布局，但这到底是怎么回事。他们工作。如果你很自负，你可以加倍努力，找到一种纯粹的基于 CSS 的方法来做到这一点。:-)
So here goes an XSLT solution.
所以这里有一个 XSLT 解决方案。
<xml>
<item id="1">Item 1</item>
<item id="2">Item 2</item>
<item id="3">Item 3</item>
<item id="4">Item 4</item>
<item id="5">Item 5</item>
<item id="6">Item 6</item>
<item id="7">Item 7</item>
<item id="8">Item 8</item>
<item id="9">Item 9</item>
</xml>
With this XSL 1.0 template applied (the number of columns is even configurable):
应用此 XSL 1.0 模板（列数甚至可配置）：
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes" omit-xml-declaration="yes" />
<xsl:template match="/xml">
<xsl:variable name="vCols" select="2" />
<xsl:variable name="vCount" select="count(item)" />
<xsl:variable name="vRows" select="ceiling($vCount div $vCols)" />
<xsl:variable name="vIterC" select="item[position() <= $vCols]" />
<xsl:variable name="vIterR" select="item[position() <= $vRows]" />
<xsl:variable name="vSelf" select="." />
<table>
<xsl:for-each select="$vIterR">
<xsl:variable name="vRowIdx" select="position()" />
<tr>
<xsl:for-each select="$vIterC">
<xsl:variable name="vOffset" select="$vRows * (position() - 1)" />
<td>
<xsl:value-of select="$vSelf/item[$vRowIdx + $vOffset]" />
</td>
</xsl:for-each>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
Yields:
产量：
<table>
<tr>
<td>Item 1</td>
<td>Item 6</td>
</tr>
<tr>
<td>Item 2</td>
<td>Item 7</td>
</tr>
<tr>
<td>Item 3</td>
<td>Item 8</td>
</tr>
<tr>
<td>Item 4</td>
<td>Item 9</td>
</tr>
<tr>
<td>Item 5</td>
<td></td>
</tr>
</table>
In case there is only one item, it produces:
如果只有一项，它会产生：
<table>
<tr>
<td>Item 1</td>
</tr>
</table>
So no two columns in this situation.
所以在这种情况下没有两列。
In any case the table will always be well-formed (e.g. no jagged rows). The one thing that this solution does not do is sorting the output. The output will always be in document order. You seem to get the items sorted properly, so this should not be a big problem.
在任何情况下，表格将始终是格式良好的（例如，没有锯齿状的行）。此解决方案不做的一件事是对输出进行排序。输出将始终按文档顺序排列。您似乎正确地对项目进行了排序，因此这应该不是什么大问题。
回答by Danimal
You could try something like:
你可以尝试这样的事情：
.option:nth-of-type(n+5) {
position: relative;
left: 14ex;
top: -6em;
}
.option:nth-of-type(n+9) {
color: red;
left: 28ex;
top: -12em;
}
... for four items a column, where line-heightis 1.5emand column width will be 14ex.
...对于四项一列，其中line-height是1.5em和列宽将是14ex。
But because this uses relative positioning, you'll probably have to reduce the size of the container.
但是因为这使用了相对定位，所以您可能不得不减小容器的大小。
Also, according to w3schools, this property isn't available in IE8 or lower.
此外，根据 w3schools 的说法，此属性在 IE8 或更低版本中不可用。
回答by Aaron Digulla
CSS can't do this. You need to collect the list on the server and distribute the items in two table columns (you can use CSS to make the two columns the same width).
CSS无法做到这一点。您需要在服务器上收集列表并将项目分布在两个表格列中（您可以使用 CSS 使两列的宽度相同）。
Note: There are browser extensions for multi column layout but they are not portable.
注意：有用于多列布局的浏览器扩展，但它们不可移植。
[EDIT] I'm aware of the article on alistapartbut I can't see a difference to my solution: The proposed multi column layout gives each item a fixed position (by giving each item a unique CSS ID and then positioning it somehow). This means you need to generate the HTML and sort the items on the server and then use lots of tricks to position them.
[编辑] 我知道alistapart上的文章，但我看不出我的解决方案有什么不同：建议的多列布局为每个项目提供了一个固定位置（通过为每个项目提供一个唯一的 CSS ID，然后以某种方式定位它） . 这意味着您需要生成 HTML 并对服务器上的项目进行排序，然后使用大量技巧来定位它们。
It's much more simple to use a table with two columns and drop the items into them during rendering.
使用具有两列的表并在渲染期间将项目放入其中要简单得多。
回答by cherrypj
One of your criteria is reading the list down, so a simple solution is a two-column table (@Aaron Digulla), with the first half of your list in the first column, etc. You can use any HTML, right? We've resorted to this method for some of our lists, since we didn't want to edit our CSS every time a list changed (nor did we want to remember to edit the classes in the HTML).
您的一个标准是向下阅读列表，因此一个简单的解决方案是一个两列表 (@Aaron Digulla)，列表的前半部分在第一列中，等等。您可以使用任何 HTML，对吗？我们对某些列表采用了这种方法，因为我们不想在每次列表更改时都编辑 CSS（我们也不想记住编辑 HTML 中的类）。
Method 1 in the ALA article would be the 2nd simplest solution (and more ideal from a purist point of view). Since you know the current item number and how many items there are, you could add some logic to get list items in the correct order.
ALA 文章中的方法 1 将是第二个最简单的解决方案（从纯粹主义者的角度来看更理想）。由于您知道当前项目编号和项目数量，您可以添加一些逻辑以按正确顺序获取列表项目。
CSS can easily style either method.
CSS 可以轻松地设置任何一种方法的样式。
回答by pinxi
If you can divide the list using little javascript (which I am not good at), then this should work:
如果您可以使用小 javascript（我不擅长）划分列表，那么这应该有效：
<script type="text/javascript">
var i=0;
var n=4;
if (i==0)
{
document.write("<div id='listFlow'><ul>");
}
for (i=1;i<=15;i++)
{
if (i==n)
{
document.write("<li>The number is " + i + "</li>" +"</ul><ul>");
var n=n+4;
continue;
}
document.write("<li>The number is " + i + "</li>");
}
document.write("</ul></div>");
</script>
<style type="text/css">
#listFlow ul{
float:left;
width:200px;
margin:0 0 0 10px;
padding:0;
}
#listFlow ul li{
list-style-position:inside;
list-style-type:disc;
margin:0;
padding:0;
width:180px;
}
</style>
Note: Please look at the CSS and NOT the javascript. This is just to show that how the lists can flow as described.
注意：请查看 CSS 而不是 javascript。这只是为了说明列表如何按照所描述的方式流动。
回答by newUserNameHere
The problem with a-list-apart, from what I could see, is that if you split a list of 11 items into 2 colums, I would want the 6th item to be in the first list. alistapart I think puts the 11th item instead in the second column.
从我所见，a-list-apart 的问题在于，如果您将 11 个项目的列表分成 2 列，我希望第 6 个项目位于第一个列表中。alistapart 我认为将第 11 项放在第二列中。
My fix was to use jQuery-Columns Plugin. For example to split a ul with a class of .mylist into 2 columns you would do
我的解决方法是使用jQuery-Columns Plugin。例如，要将 .mylist 类的 ul 拆分为 2 列，您可以这样做
$(document).ready( function () {
$('.mylist').cols(5);
});
Here's a live example on jsfiddle
这是一个关于 jsfiddle 的实例
