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;
}

オプションは次のとおりです。

正式な構文: ディスク | サークル | 正方形 | 小数 | 10 進先行ゼロ | 低ローマ | アッパーローマ | 低ギリシャ語 | 低ラテン語 | アッパーラテン | アルメニア | グルジア語 | 低アルファ | アッパーアルファ | なし

ソース: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

あなたの更新された質問に関しては、画像と箇条書きリストをテーブルに入れることから（私が考える傾向があるのは悪い考えです）、含むを使用することまで、機能するさまざまなアプローチがたくさんありますDIV。ただし、HTML (および JavaScript) を変更したくない場合は、おそらくCSS の に を追加して、リスト項目をプッシュしてテキストに合わせて表示しますpadding-left。liこれは一種のハックですが、簡単に推論でき、HTML を変更する必要はありません。

于 2013-09-11T04:15:54.700 に答える
0

要素は正常に配置されているだけです...いくつかのCSSを変更すると、それらは所定の位置に収まります。

  1. その改行 ( <br/>) を取り除くと、すべてが台無しになります!
  2. ヘッダー (この場合は) と要素を含む で使用paddingして、すべてを必要な場所に正確に配置します。divpul
  3. 緑色の「チェック済み」アイコンをそのコンテナの背景として設定しますdiv。
  4. 要素liに選択したスタイル (箇条書き、円など) を付けます。
于 2013-09-11T07:01:54.917 に答える
0

これは、リスト アイテムのデフォルトの動作をオーバーライドする CSS である可能性が最も高いです。Google Chrome (または IE 8+) で Web ページを開き、F12 を押して Web 開発者ツールにアクセスしてみてください。その後、リスト アイテムを選択して、それに割り当てられているすべてのスタイルを表示できます。CSS を使用せずに自分のマシンでコードを試してみましたが、期待どおりに動作します。

于 2013-09-11T04:23:26.417 に答える