بالعربي نمط شرطة HTML بنمط القائمة




www w3schools com html5 (16)

CSS:

li:before {
  content: '— ';
  margin-left: -20px;
}

li {
  margin-left: 20px;
  list-style: none;
}

HTML:

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

https://code.i-harness.com

هل هناك طريقة لإنشاء نمط قائمة في HTML مع شرطة (أي - أو - &ndash; أو - &mdash; ) أي

<ul>
  <li>abc</li>
</ul>

إخراج:

- abc

لقد حدث لي أن أفعل هذا بشيء مثل li:before { content: "-" }; ، على الرغم من أنني لا أعرف سلبيات هذا الخيار (وسوف تكون ملزمة كثيرا للردود).

بشكل أكثر عمومية ، أنا لا تمانع في معرفة كيفية استخدام الأحرف العامة لعناصر القائمة.


إليك إصدار بدون أي موضع نسبي أو مطلق وبدون إبطال النص:

ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}
ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}

استمتع ؛)


استخدم هذا:

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}

بدلاً من استخدام lu li ، استخدم dl (definition list) and dd . يمكن تعريف <dd> باستخدام نمط css القياسي مثل {color:blue;font-size:1em;} واستخدامها كمؤشر أي رمز تضعه بعد علامة html. وهي تعمل مثل ul li ، ولكنها تسمح لك باستخدام أي رمز ، يجب عليك فقط إقناعها للحصول على تأثير القائمة البادئة التي تحصل عليها عادةً مع ul li .

CSS:
dd{text-indent:-10px;}

HTML
<dl>
<dd>- One</dd>
<dd>- Two</dd>
<dd>- Three</dd></dl>

يعطيك رمز أنظف بكثير! بهذه الطريقة ، يمكنك استخدام أي نوع من الأحرف كعلامة! المسافة البادئة هي حوالي -10px وأنها تعمل الكمال!


دعني أضيف نسختاتي أيضًا ، ومعظمها بالنسبة لي للعثور على الحل المفضل الخاص بي مرة أخرى:

ul {
  list-style-type: none;
  /*use padding to move list item from left to right*/
  padding-left: 1em;
}

ul li:before {
  content: "–";
  position: absolute;
  /*change margin to move dash around*/
  margin-left: -1em;
}

`` `

https://codepen.io/burningTyger/pen/dNzgrQ


طريق اخر:

li:before {
  content: '\2014\00a0\00a0'; /* em-dash followed by two non-breaking spaces*/
}
li {
  list-style: none;
  text-indent: -1.5em;
  padding-left: 1.5em;    
}

في حالتي إضافة هذا الرمز إلى CSS

ul {
    list-style-type: '- ';
}

كان كافيا. بسيط كما هو.


لأي شخص لديه هذه المشكلة اليوم ، الحل ببساطة:

نمط قائمة: "- "


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

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

تحرير: لقد فعلت اختبار صغير مع نهج OP. في IE8 ، لم أستطع الحصول على هذه التقنية للعمل ، لذلك بالتأكيد ليس عبر المتصفح. علاوة على ذلك ، في Firefox و Chrome ، يبدو أن تحديد نمط نمط القائمة إلى لا شيء بالتزامن يتم تجاهله.


ما كان يعمل بالنسبة لي كان

<ul>
    <li type= "none">  &ndash; line 1 </li>
    <li type= "none">  &ndash; line 2 </li>
    <li type= "none">  &ndash; line 3 </li>
</ul>

هنا هو بلدي نسخة fiddle :

الفئة (modernizr) .generatedcontent على <html> تعني عمليًا IE8 + وكل متصفح عاقل آخر.

<html class="generatedcontent">
  <ul class="ul-dash hanging">
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
  </ul>

CSS:

.ul-dash {
  margin: 0;
}

.ul-dash {
  margin-left: 0em;
  padding-left: 1.5em;
}

.ul-dash.hanging > li { /* remove '>' for IE6 support */
  padding-left: 1em;
  text-indent: -1em;
}  

.generatedcontent .ul-dash {
  list-style: none;
}
.generatedcontent .ul-dash > li:before {
  content: "–";
  text-indent: 0;
  display: inline-block;
  width: 0;
  position: relative;
  left: -1.5em;
}

يتمثل الحل في إضافة علامة span إضافية مع mdash في ذلك:

<ul class="mdash-list">
    <li><span class="mdash-icon">&mdash;</span>ABC</li>
    <li><span class="mdash-icon">&mdash;</span>XYZ</li>
</ul>

وإضافة إلى css:

ul.mdash-list 
{
    list-style:none;
}

ul.mdash-list  li
{
    position:relative;
}

ul.mdash-list li .mdash-icon
{
    position:absolute;
    left:-20px;
}

يمكنك استخدام :before content: مع الأخذ في الاعتبار أن هذا غير مدعوم في الإصدار 7 من IE أو أقل. إذا كنت موافق على ذلك فهذا هو الحل الأفضل. راجع " يمكن استخدام" أو جداول توافق QuirksMode CSS للحصول على التفاصيل الكاملة.

الحل الأسوأ قليلاً الذي يجب أن يعمل في المتصفحات القديمة هو استخدام صورة للرصاصة وجعل الصورة تبدو وكأنها شرطة. راجع صفحة list-style-image W3C للحصول على أمثلة.


يوجد إصلاح سهل (مسافة بادئة للنص) للحفاظ على تأثير قائمة المسافات البادئة مع :before فئة زائفة.

ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}
Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text


ul {
  list-style-type: none;
}

ul > li:before {
  content: "–"; /* en dash */
  position: absolute;
  margin-left: -1.1em; 
}

fiddle التجريبي


ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}




html-lists