කිසිම උණ්ඩයකින් තොරව මට අනුපිළිවෙලට නැති ලැයිස්තුවක් අවශ්‍යයි

මම ඇණවුම් නොකළ ලැයිස්තුවක් නිර්මාණය කර ඇත්තෙමි. අනුපිළිවෙලට නැති ලැයිස්තුවේ ඇති උණ්ඩ කරදරකාරී බව මට හැඟේ, එබැවින් ඒවා ඉවත් කිරීමට මට අවශ්‍යය.

උණ්ඩ නොමැතිව ලැයිස්තුවක් තිබිය හැකිද?

ඔබ විසින් ගිනිතබාගෙන උණ්ඩ ඉවත් කළ හැක list-style-typeකිරීමට noneමව් මූලද්රව්යය (සාමාන්යයෙන් සඳහා CSS මත <ul>උදාහරණයක් ලෙස,):

ul {
  list-style-type: none;
}

ඔබ ද එක් කිරීමට ඔබට අවශ්ය විය හැකිය padding: 0සහ margin: 0ඔබ මෙන්ම එබුම ඉවත් කිරීමට අවශ්ය නම්, ඒ සඳහා.

බලන්න Listutorial ලැයිස්තුව ශිල්ප ක්රම හැඩතල විශාල අයික්මාන්ය සඳහා.

ඔබ Bootstrap භාවිතා කරන්නේ නම්, එයට “අස්ථිර” පන්තියක් ඇත:

ලැයිස්තු අයිතමවල පෙරනිමි ලැයිස්තු ශෛලිය සහ වම් පෑඩින් ඉවත් කරන්න (ළඟම ළමයින්ට පමණි).

බූට්ස්ට්‍රැප් 2:

<ul class="unstyled">
   <li>...</li>
</ul>

http://twitter.github.io/bootstrap/base-css.html#typography

බූට්ස්ට්‍රැප් 3 සහ 4:

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

Bootstrap 3: http://getbootstrap.com/css/#type-lists

Bootstrap 4: https://getbootstrap.com/docs/4.3/content/typography/#unstyled

ඔබ භාවිතා කළ යුතුයි list-style: none;

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

පෙර පිළිතුරු වලට කුඩා ශෝධනයක්: දිගු තිර අතිරේක තිර රේඛාවලට විහිදුවන්නේ නම් ඒවා වඩාත් කියවිය හැකි ලෙස සකස් කිරීම:

ul, li {list-style-type: none;}

li {padding-left: 2em; text-indent: -2em;}

ඔයා තමයි එය වැඩ කිරීමට නොහැකි නම් <ul>මට්ටමේ, ඔබ තැනින් අවශ්ය විය හැකි list-style-type: none;ට <li>මට්ටම:

<ul>
    <li style="list-style-type: none;">Item 1</li>
    <li style="list-style-type: none;">Item 2</li>
</ul>

මෙම පුනරාවර්තනය වළක්වා ගැනීම සඳහා ඔබට CSS පන්තියක් නිර්මාණය කළ හැකිය:

<style>
ul.no-bullets li
{
    list-style-type: none;
}
</style>

<ul class="no-bullets">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

අවශ්‍ය විට, භාවිතා කරන්න !important:

<style>
ul.no-bullets li
{
    list-style-type: none !important;
}
</style>

උණ්ඩ ඉවත් කිරීම සඳහා මම ul සහ li යන දෙකෙහිම ලැයිස්තු ශෛලිය භාවිතා කළෙමි. උණ්ඩය අභිරුචි චරිතයකින් ආදේශ කිරීමට මට අවශ්‍ය විය, මේ අවස්ථාවේ දී 'ඉරක්'. එමඟින් පෙළ එතෙන විට ක්‍රියා කරන මනාව මුද්‍රණය කරන ලද බලපෑමක් ලබා දෙයි.

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

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

ulපෙරනිමි විලාසය සම්පූර්ණයෙන්ම ඉවත් කිරීමට :

    list-style-type: none;

    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;

ඔබට මෙය පිරිසිදු 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

මෙය වෙඩි නොවදින ලෙස සිරස් අතට ලැයිස්තුවක් ඇණවුම් කරයි. එක පේළියකින්!

li {
    display: block;
}

ඔබ දැනට පවතින තේමාවක් සංවර්ධනය කරන්නේ නම්, තේමාවට අභිරුචි ලැයිස්තු ශෛලිය තිබිය හැකිය.

එබැවින් ඔබට list-style: none;ul හෝ li ටැග් භාවිතයෙන් ලැයිස්තු ශෛලිය වෙනස් කළ නොහැකි නම් , පළමුව පරීක්ෂා කර බලන්න, !importantවෙනත් ශෛලියක් ඔබේ ශෛලිය නැවත ලියන්නේ නම්, වැදගත් නම් එය සවි කර ඇත්නම්, ඔබ වඩාත් නිශ්චිත තේරීම් කාරකයක් සොයාගෙන වැදගත් දේ ඉවත් කළ යුතුය! .

එය එසේ නොවේ නම් එහි li:beforeඅන්තර්ගතය තිබේදැයි පරීක්ෂා කරන්න . ඉන්පසු කරන්න:

li:before { dispaly: none; }

 <div class="custom-control custom-checkbox left">
    <ul class="list-unstyled">
        <li>
         <label class="btn btn-secondary text-left" style="width:100%;text-align:left;padding:2px;">
           <input type="checkbox" style="zoom:1.7;vertical-align:bottom;" asp-for="@Model[i].IsChecked" class="custom-control-input" /> @Model[i].Title
         </label>
        </li>
     </ul>
</div>

මම උත්සාහ කර නිරීක්ෂණය කළෙමි:

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

ඔබට CSS වෙත යොමුවීමකින් තොරව දේවල් සරලව තබා ගැනීමට අවශ්‍ය නම්, මම  මගේ කේත රේඛාවලට ඇතුළත් කරමි. එනම් , <table></table>.

ඔව්, එය අවකාශ කිහිපයක් ඉතිරි කරයි, නමුත් එය නරක දෙයක් නොවේ.