Simbol de glonț personalizat pentru
  • elemente din
      care este un caracter obișnuit, și nu o imagine (Programare, Html, Css, Webkit, Webkit Mobil)
  • idStar a intrebat.

    Îmi dau seama că se poate specifica o grafică personalizată pentru a înlocui caracterul glonț, folosind atributul CSS:

    list-style-image
    

    Și apoi să îi dați o adresă URL.

    Cu toate acestea, în cazul meu, vreau doar să folosesc simbolul „+”. Nu vreau să fiu nevoit să creez un grafic pentru asta și apoi să arăt spre el. Aș prefera să instruiesc doar lista neordonată să folosească un simbol „plus” ca simbol glonț.

    Se poate face acest lucru sau sunt obligat să creez mai întâi un grafic?

    16 răspunsuri
    TJ WealthEngine API Evangelist

    Următoarele sunt citate din Îmblânzirea listelor:

    Pot exista momente în care aveți o listă, dar nu doriți niciun punct sau doriți să utilizați un alt caracter în locul punctului. Din nou, CSS oferă o soluție simplă. Adăugați pur și simplu list-style: none; la regula dvs. și forțați LI-urile să se afișeze cu indentări suspendate. Regula va arăta cam așa:

    ul {
       list-style: none;
       margin-left: 0;
       padding-left: 1em;
       text-indent: -1em;
    }
    

    Fie că padding-ul, fie că marja trebuie să fie setată la zero, iar cealaltă la 1em. În funcție de „bullet” pe care îl alegeți, este posibil să fie nevoie să modificați această valoare. Indentarea negativă a textului face ca primul rând să fie mutat la stânga cu această valoare, creând o indentare suspendată.

    HTML-ul va conține UL-ul nostru standard, dar cu orice caracter sau entitate HTML pe care doriți să o utilizați în locul glonțului care precede conținutul elementului de listă. În cazul nostru vom folosi „, ghilimele de dublu unghi drept: „.

    ” Elementul 1
    ” Elementul 2
    ” Articolul 3
    ” Elementul 4
    ” Punctul 5 vom face
       un pic mai lungă, astfel încât
       să se înfășoare

    Comentarii

    • Soluția ta a funcționat, în combinație cu pseudo-selectorul :before pe care tu și @Tieson T. îl indicați amândoi. Mi-a plăcut că ai subliniat modul în care diferitele atribute de pe <UL> lucrează împreună pentru a imita indentarea glonțului. –  > Por idStar.
    • Iată cum am pus-o împreună, care a funcționat: ul { font-size: 14px; line-height: 16px; list-style: none; margin-left: 0; padding-left: 1em; text-indent: -1em; } li:before { content: „+ „; } A trebuit să pun un spațiu după simbolul +, dar pare rezonabil de bine aliniat. –  > Por idStar.
    • Din nefericire, cu această metodă, semnul glonțului este inclus în selecții, ceea ce nu se întâmplă în cazul glonțurilor normale. –  > Por Konrad Höffner.
    Mike T

    Acesta este un răspuns târziu, dar tocmai am dat peste asta… Pentru a obține indentarea corectă pe orice linie care se înfășoară, încercați în acest fel:

    ul {
      list-style: none;
      margin-left: 0;
      padding-left: 0;
    }
    
    li {
      padding-left: 1em;
      text-indent: -1em;
    }
    
    li:before {
      content: "+";
      padding-right: 5px;
    }
    

    Comentarii

    • Pentru mine, funcționează mai bine să folosesc ch ca unitate de măsură, în special pentru a face text-indent: -2ch pentru a ține cont de semnul + și de spațiul de după el, apoi padding-right: 1ch pentru a adăuga acel spațiu. Cu toate acestea, un mare +1. –  > Por cobaltduck.
    Jpsy

    Atât de multe soluții.
    Dar tot cred că este loc de îmbunătățiri.

    Avantaje:

    • cod foarte compact
    • funcționează cu orice dimensiune de font
      (nu conține valori absolute ale pixelilor)
    • aliniază perfect rândurile
      (nu există o ușoară deplasare între primul rând și rândurile următoare)

    Comentarii

    • acesta este cel mai bun –  > Por user3168511.
    • Acesta este un răspuns mai bun în opinia mea, deoarece indică modul în care puteți personaliza și alte detalii. Și are și „Run code snippet” atașat! –  > Por Ionuț Ciuta.
    • Acesta este ar trebui să fie răspunsul. Curat și simplu –  > Por EvilDr.
    • Căutam o soluție folosind o imagine și am încercat o mulțime de răspunsuri, dar acesta a funcționat cel mai bine pentru mine! Am reușit să folosesc content: url('link-to-my-asset.svg'); și să setez lățimea imaginii și padding-ul dintre bullet și conținut. Mulțumesc! –  > Por AnnieP.
    • Acest lucru este perfect! –  > Por Felix.
    PHPst

    Aceasta este soluția W3C. Funcționează în Firefox și Chrome.

    ul { list-style-type: " "; }
    /* Sets the marker to a   emoji character */
    

    http://dev.w3.org/csswg/css-lists/#marker-content

    Comentarii

    • Deși este pare să funcționeze în versiunile actuale de Firefox, rezultatul este extrem de urât: glonțul personalizat este plasat chiar în fața conținutului textului (se fixează pe acesta), aproape ca și cum li:before {content:"…";} a fost folosit fără nicio altă indentare și aliniere. –  > Por Anton Samsonov.
    NicolasBernier

    Iată cea mai bună soluție pe care am găsit-o până acum. Funcționează foarte bine și este cross-browser (IE 8+).

    ul {
        list-style: none;
        margin-left: 0;
        padding-left: 1.2em;
        text-indent: -1.2em;
    }
    
    li:before {
        content: "►";
        display: block;
        float: left;
        width: 1.2em;
        color: #ff0000;
    }
    

    Important este să aveți caracterul într-un bloc plutitor cu o lățime fixă, astfel încât textul să rămână aliniat dacă este prea lung pentru a încăpea pe o singură linie.1.2em este lățimea pe care o doriți pentru caracter, modificați-o în funcție de nevoile dvs.

    Comentarii

    • Aceasta este cu ușurință cea mai bună soluție pe care am găsit-o. –  > Por Charles Roper.
    • ab-use of float din nou? … naah. – user719662
    sdw

    Font-awesome oferă o soluție excelentă din start:

    Tieson T.

    Puteți utiliza :before pseudo-selector pentru a insera conținut în fața elementului de listă. Puteți găsi un exemplu pe Quirksmode, la adresa http://www.quirksmode.org/css/beforeafter.html. Eu folosesc acest lucru pentru a insera ghilimele uriașe în jurul blockquote-urilor…

    HTH.

    utilizator648519

    Soluția mea folosește poziționarea pentru ca liniile înfășurate să se alinieze automat corect. Deci, nu trebuie să vă faceți griji cu privire la setarea padding-right pe li:before.

    silverliebt

    Este recomandabil să calificați stilul de stilizare al <li> astfel încât să nu afecteze <ol> elemente din listă. Deci:

    ul {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
    }
    
    ul li {
        padding-left: 1em;
        text-indent: -1em;
    }
    
    ul li:before {
        content: "+";
        padding-right: 5px;
    }
    

    bob

    Comentarii

    • Am votat asta doar pentru că /*copy and paste a bullet from HTML in browser into css (nu folosesc coduri ascii) */ –  > Por kheya.
    Viraj Giri

    Comentarii

    • Mulțumesc… Este foarte curat și am uitat de !important, , care a fost vitală pentru a face să funcționeze CSS-ul meu personalizat din Blogspot –  > Por velkoon.
    dmartinezfernandez

    Stilul Em dash:

    ul.emdash {
      list-style-type: none;
      list-style-position: inside;
      text-indent: -1.25em;
    }
    ul.emdash > li:before {
      content: "20140A0"; /* em dash + space*/
    }
    

    John Magnolia

    Prefer să folosesc marja negativă, vă oferă mai mult control

    ul {
      margin-left: 0;
      padding-left: 20px;
      list-style: none;
    }
    
    li:before {
      content: "*";
      display: inline;
      float: left;
      margin-left: -18px;
    }
    

    gorn

    Interesant este că nu cred că niciuna dintre soluțiile postate nu este suficient de bună, deoarece se bazează pe faptul că caracterul folosit are lățimea de 1em, ceea ce nu trebuie să fie așa (poate cu excepția răspunsului lui John Magnolia care, totuși, folosește float, ceea ce poate complica lucrurile în alt mod). Iată încercarea mea:

    Aceasta are următoarele avantaje (față de alte soluții):

    1. Nu are nu se bazează pe lățimea simbolului așa cum vedeți în exemplu. Am folosit două caractere pentru a arăta că funcționează chiar și cu gloanțe late. Dacă încercați acest lucru în alte soluții, veți obține un text nealiniați (de fapt, este vizibil chiar și cu simbolul * în zoom-uri mai mari).
    2. Se obține un total de controlul total al spațiului folosit de gloanțe. Puteți înlocui 30px cu orice (chiar și 1em etc). Doar nu uitați să îl schimbați în toate cele trei locuri.
    3. Dacă vă oferă un control total control asupra poziționării glonțului. Trebuie doar să înlocuiți text-align: center; cu orice lucru pe placul dumneavoastră. De exemplu, puteți încerca
      color: red;
      text-align: right;
      padding-right: 5px;
      box-sizing: border-box;
      sau, dacă nu vă place să vă jucați cu border-box, scădeți pur și simplu padding-ul (5px) din lățime (adică width:25px în acest exemplu). Există o mulțime de opțiuni.
    4. Nu folosește flotoare, deci poate fi conținută oriunde.

    Bucurați-vă.

    m4n0

    Puteți utiliza ::marker pseudo-element. Acest lucru este util în situațiile în care trebuie să aveți entități de caractere diferite pentru fiecare element de listă.

    ul li::marker {
      content: " "; /* Your symbol here */
    }
    

    venkat

    încercați acest lucru