كيف يمكنك تخصيص الأرقام في قائمة مرتبة؟

StackOverflow https://stackoverflow.com/questions/10877

سؤال

كيف يمكنني محاذاة الأرقام إلى اليسار في قائمة مرتبة؟

1.  an item
// skip some items for brevity 
9.  another item
10. notice the 1 is under the 9, and the item contents also line up

تغيير الحرف بعد الرقم في قائمة مرتبة؟

1) an item

هل يوجد أيضًا حل CSS للتغيير من الأرقام إلى القوائم الأبجدية/الرومانية بدلاً من استخدام سمة النوع في عنصر ol.

أنا مهتم في الغالب بالإجابات التي تعمل على Firefox 3.

هل كانت مفيدة؟

المحلول

هذا هو الحل الذي أستخدمه في Firefox 3 وOpera وGoogle Chrome.لا تزال القائمة معروضة في IE7 (ولكن بدون قوس الإغلاق وأرقام المحاذاة لليسار):

ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  display: block;
  margin-bottom: .5em;
  margin-left: 2em;
}
li::before {
  display: inline-block;
  content: counter(item) ") ";
  counter-increment: item;
  width: 2em;
  margin-left: -2em;
}
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine<br>Items</li>
  <li>Ten<br>Items</li>
</ol>

يحرر: تم تضمين إصلاح سطر متعدد بواسطة Strager

هل يوجد أيضًا حل CSS للتغيير من الأرقام إلى القوائم الأبجدية/الرومانية بدلاً من استخدام سمة النوع في عنصر ol.

تشير إلى نوع نمط القائمة خاصية CSS.أو عند استخدام العدادات، تقبل الوسيطة الثانية قيمة نوع نمط القائمة.على سبيل المثال ما يلي سوف يستخدم الرومانية العليا:

li::before {
  content: counter(item, upper-roman) ") ";
  counter-increment: item;
/* ... */

نصائح أخرى

CSS لقوائم التصميم هو هنا, ، ولكن في الأساس:

li {
    list-style-type: decimal;
    list-style-position: inside;
}

ومع ذلك، ربما لا يمكن تحقيق التصميم المحدد الذي تسعى إليه إلا من خلال التعمق في الأجزاء الداخلية للتخطيط باستخدام شيء مثل هذا (لاحظ أنني لم أجربه فعليًا):

ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }

يمكنك أيضًا تحديد الأرقام الخاصة بك في HTML - على سبيل المثال.إذا تم توفير الأرقام من خلال قاعدة بيانات:

<ol>
  <li seq="1">Item one</li>
  <li seq="20">Item twenty</li>
  <li seq="300">Item three hundred</li>
</ol>

ال seq تصبح السمة مرئية باستخدام طريقة مشابهة لتلك الواردة في الإجابات الأخرى.ولكن بدلا من استخدام content: counter(foo), ، نحن نستخدم content: attr(seq):

ol {
  list-style: none;
}

ol > li:before {
  content: attr(seq) ". ";
}

العرض التوضيحي في CodePen مع المزيد من التصميم

سرق الكثير من هذا من الإجابات الأخرى، ولكن هذا يعمل في FF3 بالنسبة لي.لقد upper-roman, ، المسافة البادئة موحدة، قوس وثيق.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
<!--
ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  margin-bottom: .5em;
}
li:before {
  display: inline-block;
  content: counter(item, upper-roman) ")";
  counter-increment: item;
  width: 3em;
}
-->
</style>
</head>

<body>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ol>
</body>
</html>

أقترح اللعب باستخدام السمة :before ورؤية ما يمكنك تحقيقه باستخدامها.سيعني ذلك أن الكود الخاص بك يقتصر حقًا على المتصفحات الجديدة الرائعة، ويستبعد القسم (الكبير بشكل مزعج) من السوق الذي لا يزال يستخدم المتصفحات القديمة غير المرغوب فيها،

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

li:before {
  content: counter(item) ") ";
  counter-increment: item;
  display: marker;
  width: 2em;
}

ولكن سيتعين عليك التجربة للعثور على الحل الدقيق.

تصطف الأرقام بشكل أفضل إذا قمت بإضافة الأصفار البادئة إلى الأرقام، عن طريق الإعداد نوع نمط القائمة ل:

ol { list-style-type: decimal-leading-zero; }

اقترضت وتحسينها إجابة ماركوس داونينج.تم اختباره ويعمل في Firefox 3 وOpera 9.يدعم خطوط متعددة أيضا.

ol {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
}

li {
    display: block;
    margin-left: 3.5em;          /* Change with margin-left on li:before.  Must be -li:before::margin-left + li:before::padding-right.  (Causes indention for other lines.) */
}

li:before {
    content: counter(item) ")";  /* Change 'item' to 'item, upper-roman' or 'item, lower-roman' for upper- and lower-case roman, respectively. */
    counter-increment: item;
    display: inline-block;
    text-align: right;
    width: 3em;                  /* Must be the maximum width of your list's numbers, including the ')', for compatability (in case you use a fixed-width font, for example).  Will have to beef up if using roman. */
    padding-right: 0.5em;
    margin-left: -3.5em;         /* See li comments. */
}

هنالك ال نوع السمة والذي يسمح لك بتغيير نمط الترقيم، ولكن لا يمكنك تغيير النقطة بعد الرقم/الحرف.

<ol type="a">
    <li>Turn left on Maple Street</li>
    <li>Turn right on Clover Court</li>
</ol>

تقول المستندات بخصوص list-style-position: outside

لم يحدد CSS1 الموقع الدقيق لمربع العلامة ولأسباب التوافق، يظل CSS2 غامضًا بنفس القدر.للتحكم بشكل أكثر دقة في صناديق العلامات، يرجى استخدام علامات.

علاوة على ذلك، توجد الأشياء المتعلقة بالعلامات.

أحد الأمثلة هو:

       LI:before { 
           display: marker;
           content: "(" counter(counter) ")";
           counter-increment: counter;
           width: 6em;
           text-align: center;
       }

لا...فقط استخدم DL:

dl { overflow:hidden; }
dt {
 float:left;
 clear: left;
 width:4em; /* adjust the width; make sure the total of both is 100% */
 text-align: right
}
dd {
 float:left;
 width:50%; /* adjust the width; make sure the total of both is 100% */
 margin: 0 0.5em;
}

انا أملكه.حاول القيام بما يلي:

<html>
<head>
<style type='text/css'>

    ol { counter-reset: item; }

    li { display: block; }

    li:before { content: counter(item) ")"; counter-increment: item; 
        display: inline-block; width: 50px; }

</style>
</head>
<body>
<ol>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
</ol>
</body>

المصيد هو أن هذا قطعاً لن يعمل على المتصفحات الأقدم أو الأقل توافقًا: display: inline-block ملكية جديدة للغاية.

سريعة والأوساخ حل بديل.يمكنك استخدام حرف الجدولة مع النص المنسق مسبقًا.هنا احتمال:

<style type="text/css">
ol {
    list-style-position: inside;
}
li:first-letter {
    white-space: pre;
}
</style>

و HTML الخاص بك:

<ol>
<li>    an item</li>
<li>    another item</li>
...
</ol>

لاحظ أن المسافة بين li العلامة وبداية النص عبارة عن حرف جدولة (ما تحصل عليه عند الضغط على مفتاح tab داخل المفكرة).

إذا كنت بحاجة إلى دعم المتصفحات القديمة، فيمكنك القيام بذلك بدلاً من ذلك:

<style type="text/css">
ol {
    list-style-position: inside;
}
</style>

<ol>
    <li><pre>   </pre>an item</li>
    <li><pre>   </pre>another item</li>
    ...
</ol>

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

* ملحوظة:لم أدرك في البداية أنه تم استخدام قائمة مرقمة.اعتقدت أنه تم إنشاء القائمة بشكل صريح.

سأقدم هنا نوع الإجابة التي لا أحب قراءتها عادةً، ولكن أعتقد أنه نظرًا لوجود إجابات أخرى تخبرك بكيفية تحقيق ما تريد، فقد يكون من الجيد إعادة التفكير فيما إذا كان ما تحاول تحقيقه حقًا فكرة جيدة.

أولاً، يجب أن تفكر فيما إذا كان من الجيد إظهار العناصر بطريقة غير قياسية، مع وجود طابع فاصل مختلف عن المتوفر.

لا أعرف أسباب ذلك، لكن لنفترض أن لديك أسبابًا وجيهة.

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

عند استخدام ترقيم "ol" القياسي، سيكون لديك محتوى معروض يكون فيه النص "li" قابلاً للتحديد، ولكن الرقم الذي يسبقه غير قابل للتحديد.أي أن نظام الترقيم القياسي يبدو وكأنه "زخرفة" أكثر من كونه محتوى حقيقي.إذا قمت بإضافة محتوى للأرقام باستخدام طرق ":before" على سبيل المثال، فسيكون هذا المحتوى قابلاً للتحديد، ونتيجة لذلك، سيتم إجراء مشكلات vopy/paste غير مرغوب فيها، أو مشكلات إمكانية الوصول مع برامج قراءة الشاشة التي ستقرأ هذا المحتوى "الجديد" بالإضافة إلى ذلك لنظام الترقيم القياسي.

ربما يمكن أن يكون هناك أسلوب آخر يتمثل في تصميم الأرقام باستخدام الصور، على الرغم من أن هذا البديل سيجلب مشاكله الخاصة (لا تظهر الأرقام عند تعطيل الصور، ولا يتغير حجم النص للرقم، ...).

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

يجعل هذا الرمز نمط الترقيم مماثلاً لرؤوس محتوى li.

<style>
    h4 {font-size: 18px}
    ol.list-h4 {counter-reset: item; padding-left:27px}
    ol.list-h4 > li {display: block}
    ol.list-h4 > li::before {display: block; position:absolute;  left:16px;  top:auto; content: counter(item)"."; counter-increment: item; font-size: 18px}
    ol.list-h4 > li > h4 {padding-top:3px}
</style>

<ol class="list-h4">
    <li>
        <h4>...</h4>
        <p>...</p> 
    </li>
    <li>...</li>
</ol>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top