tableの中のリストが枠外に表示されてしまう

Question

wordpressでテンプレートをcocoonでサイトを構築していますが、
以下のようなテーブルの中にリストを作成し、プレビューをした段階では問題なく表示される（リストの黒丸から内容１の枠内に収まる）のですが、更新後、固定ページを表示すると、リストの黒丸が項目１の枠の中に入ってしまいます。

<div class="delivery_list"> <table border="1" width="500" cellspacing="0" cellpadding="5" bordercolor="#333333"> <tr> <td>項目１</td> <td>内容１<br><p>詳細</p> <ul> <li>リスト１</li> <li>リスト２</li> </ul> </td> </tr> </table> </div>

.delivery_list li {
list-style:disc;
margin-left: 50px;
text-align:left;
}

以下は、wordpress の編集画面でのプレビュー（このようにサイトが表示されたい）

以下は、サイトの表示（実際に表示すると、黒丸が項目１の枠内に入ってしまう）

Answer 1

別の部分での設定が適用されているのでしょう。
ブラウザの検証ツールでどのCSSが適用されているか確認して、どれが原因かまずはつかみましょう。

そのうえで、そのCSSを上書き、あるいは打ち消すようなCSSを設定するようにします。

Chromeデベロッパーツール（検証モード）の基本的な使い方を解説｜ferret

以下は推測ですが、ulのpadding-leftが 0 か小さい値に設定されいると思われますので、適切な値に変更してみてください。

.delivery_list ul {
    padding-left: 40px;
}

Comments

[fhiro_tokio]

padding-left: 40px;
を指定すると、”・”　と”リスト”の間が広がるだけで、”・”の位置は変わりません。

[hatena19]

li に設定してませんか。 padding-left を設定するのは ul ですよ。

[fhiro_tokio]

先程のはliにしてしまいました。
改めて、ul に設定しましたが、位置は変わりませんでした。
ちなみに、200px とか大きな値を入れても、位置は全く変わりません。

[fhiro_tokio]

.delivery_list　にスペルミスがありました。
正しく直したら、できました。
ありがとうございます。

Answer 2

とりあえず、div class="delivery_list
の閉じる側のダブルクォートがぬけています
それ以外は提示されているcssでは現象が確認できません

Comments

[fhiro_tokio]

ダブルクォートをつけても状況は変わりませんでした

[yambejp]

おそらく別のなにか指定がおかしいのだと思います
回答にもかきましたが、提示されているCSSには問題ありません