我是该站点的常客，并且喜欢它！为了提供知识水平的背景知识，我在2012年秋季参加了网络编程入门课程。
目标：用Javascript编写代码（以供重用），以创建一个多列项目符号列表，其打印内容如下：
属性（这是一个标题）
Attr1 * Attr2
Attr3 * Attr4
Attr5 * Attr6
注意：Phillipe的解决方案有效。在底部给出。实现目标。
在寻找如何实现这一目标之后，我尝试了以下代码
书面代码
有问题的代码：http://jsfiddle.net/M5M8R/
<p>Attributes
<ul>
<li style="float: left;">
<ul>
<li>Attr1</li>
<li>Attr3</li>
<li>Attr5</li>
</ul>
</li>
<li style="float: left;">
<ul>
<li>Attr2</li>
<li>Attr4</li>
<li>Attr6</li>
</ul>
</li>
</ul>
</p>
完整代码（如果您想看到它，请放心，它不会太长！）
<!DOCTYPE html >
<html lang="en" >
<head>
<title>
Bullet Column Test
</title>
<meta charset="utf-8" />
<style type="text/css">
h1 {text-align:center}
h2 {margin-bottom:0;}
p {margin-top:0;}
body {color: #039; background-color: #eeff77;}
ul{padding: 0; list-style: square;}
</style>
<script type="text/javascript">
/* <![CDATA[ */
function printBulletList(heading, headingLevel, bulletArray, noOfColsRequested) {
//Divide number of bullets in bullet array by no of requested columns to determine
//How many rows will be needed
var noOfRows = Math.ceil(bulletArray.length/noOfColsRequested);
//If no of cols requested exceeds no of bullets then set no of cols to no of bullets
var noOfCols;
if (bulletArray.length < noOfColsRequested)
noOfCols = bulletArray.length;
else
noOfCols = noOfColsRequested;
//Write html for heading, followed by unordered list column by column
document.write("<p>");
document.write("<h"+headingLevel+">"+heading+"</h"+headingLevel+">");
document.write("<ul>");
for (i=0; i<noOfCols; i++) {
document.write("<li style='float:left;'>");
document.write("<ul>");
for (j=0; j< noOfRows; j++) {
//since last row may not be fully populated, do not write if reached end of bullet array
if ((i + noOfCols*j) < bulletArray.length)
document.write("<li>"+bulletArray[i+noOfCols*j]+"</li>");
}
document.write("</ul>");
document.write("</li>");
}
document.write("</ul>");
document.write("</p>");
document.write("<br>");
}
/* ]]> */
</script>
</head>
<body>
<div>
<p>Attributes
<ul>
<li style="float: left;">
<ul>
<li>Attr1</li>
<li>Attr3</li>
<li>Attr5</li>
</ul>
</li>
<li style="float: left;">
<ul>
<li>Attr2</li>
<li>Attr4</li>
<li>Attr6</li>
</ul>
</li>
</ul>
</p>
<br>
<script type="text/javascript">
/* <![CDATA[ */
testArray = new Array("test1", "test2", "test3", "test4", "test5", "test6", "test7");
printBulletList("Tests", 2, testArray, 4);
/* ]]> */
</script>
<br>
<br>
</div>
</body>
</html>
问题
（1）我使用LTS（小于斜线）编写代码。在LTS中预览时效果很好，但是
当我在浏览器中打开文件时，所有项目符号都会折叠。因此，第一行显示为：
Attr * 1Attr2（Attr1的项目符号消失，而Attr2的项目符号叠加在Attr1的顶端）。请参阅上面的jsfiddle链接。
我希望这是浏览器默认CSS设置的问题。内联CSS优先于浏览器设置，因此我希望这是LTS的默认设置与未指定设置的浏览器的默认设置有关的问题。哪一个？
（2）正文中的项目符号列后面的内容将打印在项目符号列的右侧（例如，除非我在正文中手动输入其他[br]，否则第二组项目符号的标题将显示在第一组项目符号的右侧。更聪明的方式？
谢谢你的帮助！
解
Philippe的解决方案有效！如果其他人想使用它，这是修改后的脚本。
function printBulletList(heading, headingLevel, bulletArray, noOfColsRequested) {
//Divide number of bullets in bullet array by no of requested columns to determine
//How many rows will be needed
var noOfRows = Math.ceil(bulletArray.length/noOfColsRequested);
//If no of cols requested exceeds no of bullets then set no of cols to no of bullets
var noOfCols;
if (bulletArray.length < noOfColsRequested)
noOfCols = bulletArray.length;
else
noOfCols = noOfColsRequested;
//Write html for heading, followed by unordered list column by column
document.write("<div class='wrapper'>");
document.write("<p>");
//Heading level 0 is used when there is no heading, and no space desired between successive
//columns of bullets
if (headingLevel > 0) {
document.write("<h"+headingLevel+">"+heading+"</h"+headingLevel+">");
document.write("<br>");
}
for (i=0; i<noOfCols; i++) {
if (headingLevel > 0)
document.write("<ul style='float: left; top-margin: 1em; bottom-margin: 1em;'>");
else
document.write("<ul style='float: left; top-margin: 0; bottom-margin: 0;'>");
for (j=0; j< noOfRows; j++) {
//since last row may not be fully populated, do not write if reached end of bullet array
if ((i + noOfCols*j) < bulletArray.length)
document.write("<li>"+bulletArray[i+noOfCols*j]+"</li>");
}
document.write("</ul>");
}
document.write("</p>");
if (headingLevel > 0)
document.write("<br>");
document.write("</div>");
}
最佳答案
也许我不明白这个问题，但是为什么您要使用许多ul li ul li？
http://jsfiddle.net/C9A4j/
<ul style="float: left;">
<li>Attr1</li>
<li>Attr3</li>
<li>Attr5</li>
</ul>