Возникли пару проблем с оружием массового уничтожения Деробинса

Question

У меня небольшая проблема с реализацией редактора WMD от Derobin.

Кажется, он неправильно форматируется, и я не совсем уверен, почему.Хотя я тоже не уверен, следует ли мне задавать этот вопрос в Doctype или нет.

Я использовал текстовые примеры markdown из ссылки SO, которые, конечно, должны выглядеть следующим образом:

1. Списки в элементе списка:
   • Сделал отступ в четыре пробела.
     • с отступом в восемь пробелов.
   • Снова четыре пробела.

2. Несколько абзацев в списке элементов:Лучше всего делать отступы в абзацах через четыре пробела Вы можете уйти и три, но она может сделать проблемы при вложении всего прочего.Придерживайтесь четырех.

   Мы сделали отступ в первой строке на дополнительный пробел, чтобы выровнять ее с этими абзацами.При реальном использовании мы могли бы сделать это со всем списком, чтобы все элементы выстроились в линию.

   Этот абзац по-прежнему является частью элемента списка, но людям он кажется беспорядочным.Поэтому рекомендуется обернуть вложенные абзацы вручную, как мы сделали с первыми двумя.

3. Блокировать кавычки в элементе списка:

Пропустите строку и сделайте отступ через четыре пробела.

4. Предварительно отформатированный текст в элементе списка:

   Skip a line and indent eight spaces.
   That's four spaces for the list
   and four to trigger the code block.
   

Однако то, что я получаю, выглядит примерно так:

Я думаю, что это связано с CSS, но я не вижу, что является причиной этого.Я могу опубликовать CSS, если это необходимо, но я бы, вероятно, опубликовал все это, поскольку я не уверен, что является причиной этого.Однако я не уверен, может ли это быть сам скрипт (что я нахожу сомнительным, поскольку примеры работают, и я просто скопировал тот же самый точный код).

Я должен также отметить, что пример, который поставляется с загрузкой WMD, отлично работает сам по себе, но как только я добавляю его в свое приложение, происходит описанное выше.

Я должен также добавить, что эта проблема сохраняется в IE7 / 8 и Firefox 3.5.

Любая помощь очень ценится.

---

Редактировать: Исправлены маркеры / цифры, появляющиеся вне поля, с добавлением стиля CSS для ol и ul list-style-position:внутри;но в остальном все остается по-прежнему.

Редактировать: Редактируйте на основе комментариев пользователей.Выводимый HTML-код выглядит следующим образом:

<ol>
<li>Lists in a list item:
<ul><li>Indented four spaces.
<ul><li>indented eight spaces.</li></ul></li>
<li>Four spaces again.</li></ul></li>
<li><p>Multiple paragraphs in a list items:
It's best to indent the paragraphs four spaces
You can get away with three, but it can get
confusing when you nest other things.
Stick to four.</p>

<p>We indented the first line an extra space to align
it with these paragraphs.  In real use, we might do
that to the entire list so that all items line up.</p>

<p>This paragraph is still part of the list item, but it looks messy to humans. So it's a good idea to wrap your nested paragraphs manually, as we did with the first two.</p></li>
<li><p>Blockquotes in a list item:</p></li>
</ol>

<blockquote>
<p>Skip a line and
indent the >'s four spaces.</p>
</blockquote>

<ol>
<li><p>Preformatted text in a list item:</p>

<pre><code>Skip a line and indent eight spaces.
That's four spaces for the list
and four to trigger the code block.
</code></pre></li>
</ol>

Answer 1

в вашем css-файле у вас есть это:

* {
    margin:0;
    padding:0;
}

это универсальный сброс, который удаляет отступы и поля со всего.Как я уже говорил в разделе Doctype.com.

Вам нужно будет удалить это и использовать более контролируемый сброс, или установите некоторые отступы и поля по умолчанию для ul и li в целом.

Поскольку у каждого браузера, похоже, разные значения по умолчанию для ul, я склонен опускать их при сбросе и специально устанавливать nav ul.

вот сброс, который я использую:

div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    }

который сбрасывает почти все, кроме списков.