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 "}".