بالعربي - www w3schools com html5




نمط شرطة HTML بنمط القائمة (11)

هل هناك طريقة لإنشاء نمط قائمة في HTML مع شرطة (أي - أو - – أو - — ) أي

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

إخراج:

- abc

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

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


CSS:

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

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

HTML:

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

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

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

استمتع ؛)


بدلاً من استخدام 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


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

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

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


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

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


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

<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;
}

يمكنك استخدام :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 {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}




html-lists