問題與多列項目符號列表和默認的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

回答

相關問題