Hvordan forhindre linjeskift i listeelementer ved hjelp av CSS

I HTML kan brukere lage lister i rekkefølge så vel som uordnede skjemaer. Som standard er det linjeskift mellom elementer i en liste. Noen ganger kan det imidlertid være lurt å vise dataene til listen i en linje, for eksempel vist i navigasjonslinjen. For dette formålet er utviklere pålagt å forhindre linjeskift mellom listeartikler.

Denne oppskrivningen vil demonstrere:

• • Hvordan lage/lage en liste i html?
  • Hvordan forhindre linjeskift i listeelementer ved hjelp av CSS?

Hvordan lage/lage en liste i html?

For å lage en liste i HTML, prøv de gitte instruksjonene.

Trinn 1: Lag en "div" -beholder

Opprinnelig lage en div -container ved hjelp av "" stikkord. Legg også til en "klasse”Attributt og fordel et navn til klasseattributtet i henhold til din preferanse.

Trinn 2: Lag en liste

Neste, bruk "

”Tag for å lage en uordnet liste og sette inn“
• ”Tag For å legge til data på listen:

  
  

  
  
  • Te
  
  
  • Kaffe
  
  
  • Melk
  
  
  • juice
  
  
  • Kald drikke
  
  
  • Mynte
  
  

  
  

  
  Som et resultat er listen blitt opprettet med suksess:

  Hvordan forhindre linjeskift i listeelementer ved hjelp av CSS?

  Hvis du vil forhindre/fjerne linjeskift fra listeelementer ved hjelp av CSS, bruk "vise”Eiendom med verdien”Inline-block”Som fjerner linjesnitt i listeelementer.

  For en praktisk demonstrasjon, sjekk ut de gitte trinnene.

  Trinn 1: Stil “div” container

  For å style beholderen, får du først få tilgang til klassen ved å bruke klassenavnet med en DOT -velger som ".Main-div”. Bruk deretter de under-satte CSS-egenskapene:

  .Main-div
  Grense: 3px solid blå;
  Margin: 20px 100px;
  bakgrunnsfarge: RGB (100, 193, 236);
  

  
  Her:

  • • “grense”Brukes for å sette grensen rundt et element.
    • “margin”Brukes til å spesifisere plassen utenfor grensen.
    • “bakgrunnsfarge”Tildeler en farge på baksiden av elementet.

  Produksjon

  
  Trinn 2: Forhindrer linjeinnbrudd i listen

  Få tilgang til listen ved hjelp av “

• ”Og bruk følgende CSS -egenskaper:

  li
  Display: Inline-block;
  overløp: skjult;
  White-Space: Nowrap;
  tekstoverflow: ellipsis;
  

  
  I følge den gitte kodebiten:

  • • “vise”Eiendomsverdien er satt som“Inline-block”For å forhindre linjeskift.
    • “flyte”Brukes for å spesifisere hva som skal skje hvis innholdslipp fra et elements boks. Denne egenskapen bestemmer om du vil ta tekst eller legge til rullefelt når et slikt elements innhold er langvarig å sette i et bestemt område.
    • “hvitrom”Brukes for å kontrollere hvitrommet og linjeskiftet inne i teksten blir behandlet.
    • “tekstoverflyt”Brukes til å håndtere omstendigheter når teksten er klippet og strømmer over fra elementets boks.

  Produksjon

  
  Du har lært om metoden for å forhindre linjeskift i listeelementer ved å bruke CSS -egenskapene.

  Konklusjon

  For å forhindre linjeinnbrudd i listeelementer ved hjelp av CSS, oppretter du først en liste ved hjelp av "

  ”Merk og legg til data ved å bruke“
  • " stikkord. Få tilgang til listen og bruk "vise”Eiendom. Neste, angi verdien “Inline-block”Som fjerner linjesnitt i listeelementer. Denne artikkelen lærte deg den enkleste metoden for å forhindre linjepausen i listeelementer ved hjelp av CSS.