0

项目符号不显示。当我通过 jsFiddle 尝试相同的方法时，它可以工作。可能是什么原因？

         <div id="mainInfo" style="display: none;" title="Customer Information">
            <div id="greenCheck" style="display: none;">
                <img src= "IMAGE_SOURCE">
            </div>
            <div id="subInfo" style="display: none;">
            </div> 
         </div>
         <div>
            //button definition onclick="show()"![enter image description here][1]
         </div>

//javascript
function show() 
{
    var htmlstr = "<p><b>The customer provided the following:</b></p><br/><ul>";
    if(true)//some condition which i made true for testing
        {
             htmlstr = htmlstr + "<li>Date of Birth</li>";
             htmlstr = htmlstr + "<li>Social Security Number</li>";
        }
        htmlstr = htmlstr + "</ul>";
        document.getElementById('mainInfo').style.display = 'block';
        document.getElementById('greenCheck').style.display = 'block';
        document.getElementById('subInfo').style.display = 'block';
        jQuery("#subInfo").html(htmlstr);
        jQuery("#mainInfo").dialog({
              //dialog code
        }
}

list-style-type:none 通过 css 文件应用。我在本地文件中进行了修改，它起作用了:)

4

3 回答 3

5

您可以添加此 CSS 以确保仅在动态添加的列表中获得项目符号：

#subInfo ul li {
  list-style-type: disc;
}

以下是您的选择：

形式语法：disk | 圆| 方| 十进制 | 小数前导零 | 下罗马 | 上罗马 | 低希腊语 | 低拉丁语 | 上拉丁语 | 亚美尼亚| 格鲁吉亚| 低阿尔法 | 上阿尔法 | 没有任何

来源：https ://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

至于您更新的问题，有很多不同的方法可以使用，从将图像和项目符号列表放在一个表格中（我倾向于认为这是一个坏主意），到使用包含DIVs. 但是，如果您不想更改 HTML（和 JavaScript），那么可能会在 CSS 中添加一个padding-left以li推动列表项与文本对齐。这是一种 hack，但它很容易推理并且不需要更改 HTML。

于 2013-09-11T04:15:54.700 回答
0

这很可能是某些 CSS 覆盖了列表项的默认行为。尝试在 Google Chrome（或 IE 8+）中打开网页，然后按 F12 以访问 Web 开发人员工具。然后，您可以选择一个列表项并查看已分配给它的所有样式。我已经在我的机器上尝试了你的代码，没有任何 CSS，它按预期工作。

于 2013-09-11T04:23:26.417 回答
0

元素只是正常流动到位......更改一些CSS，它们就会到位。

  1. 去掉那个换行符（<br/>），它只会把一切都搞砸了！
  2. padding在div包含标题（在本例中为p）和元素上使用ul以将所有内容准确放置在您想要的位置。
  3. 将绿色的“选中”图标设置为该容器的背景div。
  4. 为li元素提供您选择的样式（子弹、圆圈等）。
于 2013-09-11T07:01:54.917 回答