jquery - 元素符号不显示

Question

元素符号未显示。当我通过 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 文件应用。我修改了本地文件并且它有效:)

Answer 1

您可以添加此 CSS 以确保您仅在动态添加的列表中获得元素符号:

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

以下是您的选择:

Formal syntax: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none

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

至于你更新的问题，有很多不同的方法可以工作，从将图像和元素符号列表放在表格中(我倾向于认为这是一个坏主意)，到使用包含 DIVs。但是，如果您不想更改 HTML(和 JavaScript)，则可能会向 CSS 中的 li 添加 padding-left 以插入列表项出现与文本对齐。这有点像 hack，但很容易推理并且不需要更改 HTML。