the - w3schools html reference pdf




تحتاج إلى قائمة غير مرتبة دون أي رصاص (18)

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

هل من الممكن أن يكون لديك قائمة بدون رصاص؟


CSS CODE

ul
{
list-style-type: none;
}

HTML الكود

<ul>
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>   
</ul>

CSS:

.liststyle {
    list-style-type: none;
}

HTML:

<ul class="liststyle">
    <li>Test</li>
</ul>

إذا أردت تحقيق ذلك باستخدام HTML خالص فقط ، فسيعمل هذا الحل عبر جميع المتصفحات الرئيسية:

وصف القوائم

ببساطة ، استخدم HTML التالي:

<dl>
  <dt>List Item 1</dt>
    <dd>Sub-Item 1.1</dd>
  <dt>List Item 2</dt>
    <dd>Sub-Item 2.1</dd>
    <dd>Sub-Item 2.2</dd>
    <dd>Sub-Item 2.3</dd>
  <dt>List Item 3</dt>
    <dd>Sub-Item 3.1</dd>
</dl>

والتي ستنتج قائمة مشابهة لما يلي:

List Item 1
     Sub-Item 1.1
List Item 2
     Sub-Item 2.1
     Sub-Item 2.2
     Sub-Item 2.3
List Item 3
     Sub-Item 3.1

مثال هنا: https://jsfiddle.net/zumcmvma/2/

المرجع هنا: https://www.w3schools.com/tags/tag_dl.asp



استخدم CSS التالي:

ul {
  list-style-type: none
}

تحتاج إلى استخدام list-style: none;

<ul style="list-style: none;">
    <li> ...</li>
</ul>

حتى يمكنك القيام بذلك.

ul {
  display: initial;
}

في CSS ...

ul {
   list-style:none;
}

في حال كنت تريد أن تبقي الأمور بسيطة دون اللجوء إلى المغلق ، أنا فقط وضعت &nbsp; في خطوط الشفرة الخاصة بي. أي <table></table> نعم يترك بعض المساحات ولكن هذا ليس بالأمر السيئ.


كل ما عليك هو تغيير list-style-type list-style أو list-style في الفصل إلى none لـ <li> .

شيء من هذا القبيل:

li {
  list-style-type : none;
}

وللمزيد من المعلومات ، أدرج جميع الخصائص التي يمكنك تعيينها list-style-type ، شغّل الكود أدناه لمشاهدة كل النتائج في هدف واحد:

.none {
  list-style-type: none;
}

.disc {
  list-style-type: disc;
}

.circle {
  list-style-type: circle;
}

.square {
  list-style-type: square;
}

.decimal {
  list-style-type: decimal;
}

.georgian {
  list-style-type: georgian;
}

.cjk-ideographic {
  list-style-type: cjk-ideographic;
}

.kannada {
  list-style-type: kannada;
}

.custom:before {
  content: '◊ ';
  color: red;
}
<ul>
  <li class="none">none</li>
  <li class="disc">disc</li>
  <li class="circle">circle</li>
  <li class="square">square</li>
  <li class="decimal">decimal</li>
  <li class="georgian">georgian</li>
  <li class="cjk-ideographic">cjk-ideographic</li>
  <li class="kannada">kannada</li>
  <li class="none custom">custom</li>
</ul>


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

<ul class="dashed-list">
  <li>text</li>
  <li>text</li>
</ul>

مع هذا المغلق:

ul.dashed-list
{
    list-style: none outside none;
}

ul.dashed-list li:before {
    content: "\2014";
    float: left;
    margin: 0 0 0 -27px;
    padding: 0;
}

ul.dashed-list li {
    list-style-type: none;
}

يعطي تأثيرًا جيدًا يعمل عندما يلتف النص


ما حاولت ولاحظت كان

header ul{
   margin: 0;
   padding: 0;
}

يجب عليك إضافة نمط إلى عنصر <ul> كما يلي:

<ul style="list-style: none; ">
    <li>Item</li>
    ...
    <li>Item</li>
</ul>

سيؤدي ذلك إلى إزالة الرموز النقطية. يمكنك أيضًا إضافة CSS في ورقة أنماط مثل الأمثلة أعلاه.


يجب عليك استخدام css من نوع نمط list: لا شيء؛

ul {
  list-style-type: none;
}


يمكنك إزالة "الرموز النقطية" عن طريق تعيين "نوع نمط القائمة: بلا" ؛ مثل

ul
{
    list-style-type: none;
}

أو

<ul class="menu custompozition4"  style="list-style-type: none;">
    <li class="item-507"><a href=#">Strategic Recruitment Solutions</a>
    </li>

</ul>

يمكنك إزالة الرموز النقطية باستخدام CSS التالية:

    ul {
         list-style: none; //or list-style-type:none; 
       }

يمكنك إضافة نمط قائمة مخصصة مثل:

li:before {
            content: '✔';
            color:red;
          }

محلي:

ul { list-style-type: none; }

التمهيد:

<ul class="list-unstyled list-group">
    <li class="list-group-item">...</li>
</ul>

ملاحظة: إذا كنت تستخدم قوائم مجموعات ، فليس هناك حاجة إلى قائمة غير متساوية.


يمكنك إزالة الرموز النقطية عن طريق تعيين list-style-type إلى none على CSS للعنصر الرئيسي (عادة ما يكون <ul> ) ، على سبيل المثال:

ul {
  list-style-type: none;
}

قد ترغب أيضًا في إضافة padding: 0 margin: 0 إلى ذلك ، إذا كنت تريد إزالة المسافة البادئة أيضًا.

انظر Listutorial كبيرة من تقنيات تنسيق القائمة.





css