问题与多列项目符号列表和默认的CSS设置，HTML5

我是这个网站的常客，并喜欢它！为了让知识水平的背景下，我在2012年秋季问题与多列项目符号列表和默认的CSS设置，HTML5

目的了一开始的网络编程课程：在Javascript编写代码（再利用）来创建打印多列项目列表如下：

属性（这是一个标题）

ATTR1 * ATTR2
Attr3 * Attr4
Attr5 * Attr6

注意：Phillipe的解决方案有效。在底部给出。目标达成。

寻求如何实现这一目标之后，我尝试下面的代码

编写的代码

<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）I用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>"); 
    }

来源

2014-01-19 user3138665

也许我不明白这个问题，但为什么你用了很多ul li ul li？ http://jsfiddle.net/C9A4j/

<ul style="float: left;"> 
    <li>Attr1</li> 
    <li>Attr3</li> 
    <li>Attr5</li> 
</ul>

来源

2014-01-19 00:21:16 Philippe

你完全理解它。我不知道如何创建多列列表并获取我在网络上搜索使用的代码。奇怪的是它在LTS中工作。您的解决方案有效 - 谢谢！我在上面的问题中添加了修改后的脚本，以防其他人想要使用它。 – user3138665

好！如果你可以标记这个答案有用，我会很高兴;） – Philippe

我曾尝试投票，但该网站不会让我，直到我有15个声望点。所以我对我的话语表示赞赏，并希望别人能够填补我的意见，并通过网站系统进行投票。 – user3138665

问题与多列项目符号列表和默认的CSS设置，HTML5

回答

相关问题