سؤال

لدي مشكلة صغيرة مع تنفيذ ديروبين لمحرر WMD.

لا يبدو أن التنسيق بشكل صحيح وأنا لست متأكدا تماما لماذا. رغم أنني لست متأكدا مما إذا كان يجب أن أسأل هذا على DocType أم لا أيضا.

كنت أستخدم الأمثلة النصية للتخفيض من المرجع، والتي يجب أن تبدو بالطبع مثل أدناه:

  1. يسرد في عنصر القائمة:
    • المسافات الأربع المسافة البادئة.
      • ثمانية مسافات المسافة البادئة.
    • أربعة مسافات مرة أخرى.
  2. فقرات متعددة في عناصر القائمة: من الأفضل بمسافة بادئة الفقرات الأربع المساحات التي يمكنك الابتعاد بها مع ثلاثة، ولكن يمكن أن تحصل على مربكة عند عش الأشياء الأخرى. التمسك أربعة.

    بادئت البادئة السطر الأول مساحة إضافية لمحاذاة هذه الفقرات. في الاستخدام الحقيقي، قد نفعل ذلك إلى القائمة بأكملها بحيث تصطف جميع العناصر.

    لا تزال هذه الفقرة جزءا من عنصر القائمة، لكنها تبدو فوضوي للبشر. لذلك من الجيد أن تلتفخ الفقرات المتداخلة يدويا، كما فعلنا مع أول اثنين.

  3. Orchquotes في عنصر القائمة:

تخطي السطر والمسافة البادئة في 4 مسافات الأربع.

  1. نص مسبق في عنصر القائمة:

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

ومع ذلك، ما أحصل عليه يبدو وكأنه هذا:

Example of issue

أعتقد أن هذا يرتبط CSS، لكنني لا أستطيع أن أرى ما الذي يسببه. يمكنني نشر CSS إذا كان هناك حاجة ولكن من المحتمل أن أشرف كل ذلك لأنني لست متأكدا مما تسبب في ذلك. ومع ذلك، لست متأكدا مما إذا كان يمكن أن يكون البرنامج النصي الفعلي نفسه (الذي أجده مشكوك فيه كأمثلة تعمل ونسخ نفس الرمز بالضبط نفسه.

يجب أن أشير أيضا إلى أن المثال الذي يأتي مع تنزيل WMD يعمل بشكل جيد على أنه خاص به، ولكن بمجرد إضافته إلى طلبي، يحدث أعلاه.

يجب أن أضيف أيضا أن هذه المشكلة مستمرة في IE7 / 8 و Firefox 3.5.

أي مساعدة هي محل تقدير كبير.


تعديل: حل الرصاص / الأرقام التي تظهر خارج المربع مع إضافة نمط CSS ل OL and UL من موقع القائمة: الداخل؛ لكن البقية لا تزال هي نفسها.

تعديل: تحرير بناء على تعليقات المستخدمين. إخراج 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>
هل كانت مفيدة؟

المحلول

في ملف CSS الخاص بك لديك هذا:

* {
    margin:0;
    padding:0;
}

وهو إعادة تعيين عالمي يزيل الحشو والهامش من كل شيء. كما قلت على doctype.com.

ستحتاج إلى إزالة ذلك، واستخدام إعادة تعيين أكثر قابلية للتحكم، أو قم بتعيين بعض الحشو والهوامش الافتراضية للألز والي بشكل عام.

كما يبدو أن كل متصفح لديه افتراضيات مختلفة عن ul's، أميل إلى حذفها من إعادة تعيين بلدي وتعيين 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;
    }

الذي إعادة تعيين كل شيء تقريبا غير القوائم.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top