Hvordan øke Polstring på en punktliste

Hvordan øke Polstring på en punktliste


Legge padding til punktlister er nyttig når du trenger å endre standard ser en nettleser kan gjengi sorterte liste kode (en sortert liste er gjengitt med tall, bokstaver eller romertall) og / eller når du ønsker å legge til ekstra avstand mellom bullet og teksten i innholdet. En enkel og effektiv metode for å gjøre dette på er å bruke CSS (Cascading Style Sheet) koding og bruke den enten til en bestemt liste eller alle dine unordered (eller bestilt) lister. Denne koden kan enten plasseres i html-dokument eller i en egen, referert fil.

Bruksanvisning

1 Det første trinnet er å finne ut hvor listen vil ta tak i CSS-koden fra. Begge veier blir nestet i <head> -taggen. Du kan plassere CSS-kode direkte i HTML-dokumentet. Dette er nyttig hvis du har noen få linjer med CSS-kode for å legge til. Du kan også be HTML-dokumentet for å få din CSS-kode fra et eksternt dokument. Her er hvordan det ser ut:

CSS direkte i <head>

<Head>

<Style type = "text / css">

<! -

ul {

padding: 5 px;

}

->

</ Style>

</ Head>

CSS-dokument referert i <head>

<Head>

<Link href = "URL eller plasseringen av filen / nameofcssdocument.css" rel = "stylesheet" type = "text / css" />

</ Head>

2 CSS-koden i seg selv er veldig enkelt, men du fortsatt trenger å gjøre et annet valg: Er koden din kommer til å påvirke alle sorterte lister, eller en uordnet liste i en bestemt del av innholdet?

For alle sorterte lister, plassere denne koden i CSS. Dette eksemplet lærer oss å legge til 5 piksler til polstring av alle punktlister:

ul {

padding: 5 px;

}

3 Du har kanskje et dokument med flere punktlister, og du kan være lurt å endre utseende på flere eller en av listene. I et slikt tilfelle, kan du opprette en ID tag i CSS. The # tag indikerer at CSS element er en ID. Her er koden:

specialpadding {

padding: 5px;

}

Det neste trinnet er å referere til denne i kode i en liste som du vil bruke CSS til; her er eksempel kode:

<Ul id = "specialpadding">

<Li> punkt 1 </ li>

<Li> item to </ li>

</ Ul>

4 Du kan legge til padding til venstre eller høyre for kule. Slik legger du til venstre, kan du bruke padding-venstre, eller padding-right, for eksempel:

ul {

padding-left: 5 px;

}

Hint

  • Du kan kalle dine IDer noe du ønsker, bare bytte ut #specialpadding, med hva du ønsker å navngi ID.
  • Polstringen Enheten kan være i piksler, poeng, eller .em, avhengig av hva målingen er egnet for design.
  • Husk å lukke alle dine koder og CSS-kode for korrekt gjengivelse. CSS-kode lukkes med en ";" etterfulgt av en "}".