多列项目符号列表和默认CSS设置HTML5存在问题_Html_Css_Multiple Columns_Bulletedlist

多列项目符号列表和默认CSS设置HTML5存在问题

html css

多列项目符号列表和默认CSS设置HTML5存在问题,html,css,multiple-columns,bulletedlist,Html,Css,Multiple Columns,Bulletedlist,我是这个网站的常客，我喜欢它！为了提供知识水平的背景知识，我在2012年秋季开始学习网络编程课程目标：用Javascript编写代码（供重用），创建多列项目符号列表，如下所示：属性（这是一个标题）属性1*属性2 属性3*属性4 属性5*6 注：菲利普的解决方案有效。在底部给出。目标已实现在寻找如何实现这一目标后，我尝试了以下代码编写的代码有问题的代码：属性属性1 属性3 属性5 属性2 属性4 属性6 完整的代码（如果你想看，别担心，它不会太长！）

我是这个网站的常客，我喜欢它！为了提供知识水平的背景知识，我在2012年秋季开始学习网络编程课程

目标：用Javascript编写代码（供重用），创建多列项目符号列表，如下所示：

属性（这是一个标题）

属性1*属性2
属性3*属性4
属性5*6

注：菲利普的解决方案有效。在底部给出。目标已实现

在寻找如何实现这一目标后，我尝试了以下代码

编写的代码

有问题的代码：

属性



属性1
属性3
属性5




属性2
属性4
属性6

完整的代码（如果你想看，别担心，它不会太长！）


子弹柱试验
h1{文本对齐：居中}
h2{页边距底部：0；}
p{margin top:0；}
正文{color:#039；背景色：#eeff77；}
ul{填充：0；列表样式：方形；}
/*  */
属性



属性1
属性3
属性5




属性2
属性4
属性6






/*  */

问题

（1）我使用LTS（小于斜杠）来编写代码。在LTS中预览时效果很好，但是在浏览器中打开文件时，所有项目符号都会折叠。因此，第一行显示为：

Attr*1Attr2（Attr1的项目符号消失，Attr2的项目符号叠加在Attr1的顶端）。请参阅上面的JSFIDLE链接

我认为这是一个浏览器默认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>");
  }

函数打印BulletList（标题、标题级别、bulletArray、noOfColsRequested）{
//将项目符号数组中的项目符号数除以请求的列数以确定
//需要多少行
var noOfRows=Math.ceil（bulletArray.length/noOfColsRequested）；
//如果请求的COL数超过项目符号数，则将COL数设置为项目符号数
var noOfCols；
if（bulletArray.length0）{
文件。写（“+标题+”）；
文件。写（“
”）；
}
对于（i=0；i=0）
文件。写（“”；
对于（j=0；j”+bulletArray[i+noOfCols*j]+””；
}
文件。写（“”）；
}
文件。写（“”）；
如果（标题级别>0）
文件。写（“
”）；
文件。填写（“”）；
}

也许我不明白这个问题，但是为什么你要用很多ulli？


属性1
属性3
属性5

你完全理解它。我不知道如何创建多列列表，也不知道如何获取我在网上搜索时使用的代码。奇怪的是，它在LTS中工作。你的解决方案很有效——谢谢！我正在将修改后的脚本添加到我的问题中，以防其他人想使用它。我确实尝试过投票支持它，但在我获得1之前，网站不会让我使用5点声誉积分。所以我的话得到了认可，我希望其他人能代替我，并通过网站系统投票。

<!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>

  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 style="float: left;">
    <li>Attr1</li>
    <li>Attr3</li>
    <li>Attr5</li>
</ul>