个人中心
gpt4 book ai didi

html - 多列元素符号列表和默认 CSS 设置问题，HTML5

转载 作者：太空宇宙 更新时间：2023-11-04 14:04:48 27 4
gpt4 key购买 nike

我是这个网站的常客并且喜欢它!为了提供知识水平的背景知识，我在 2012 年秋季参加了网络编程入门类(class)。

目标:用 Javascript 编写代码(以供重用)以创建打印如下的多列元素符号列表:

属性(这是一个标题)

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

注意: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>

关于html - 多列元素符号列表和默认 CSS 设置问题，HTML5，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21211568/

27 4 0
文章推荐： html - 边框如何影响内部 div 的大小？
文章推荐： c++ - 表达式必须是左值
文章推荐： php - 从数组中选择两种颜色
文章推荐： c++ - 为泛型类传递比较函数
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com