Hvordan lage knapper på rad i CSS

March 26

I HTML er "<-knappen>" tag skaper knapper på innsiden eller utsiden av web-skjemaer. Knapper kan gå hvor som helst på en side, og så lenge det er nok plass for dem å vise ved siden av hverandre, de vil ordne seg på den måten. Manipulere knapper på rad for å også berøre sider med hverandre er mer av en utfordring, fordi nettlesere gjelder standardstiler for å danne kontroller at du ikke alltid kan overstyre, for eksempel marger rundt knappene. Du kan også angi din egen grense stil til knapperaden for å få knappene slippe mesteparten av sin standard styling.

Bruksanvisning

1 Åpne din webside i en editor - Notisblokk vil gjøre hvis du har ingen kode editor installert - og legge en div der du ønsker å gjøre rad med knapper:

Gi div ID-navnet "knapper" slik at du kan style den i CSS.

2 Åpne stilark for din webside eller legge til CSS-kode mellom "<style>" tags:

Legg denne koden hvis det ikke allerede er mellom "<head>" koder.

3 Skriv en stil regel å påvirke alle knappene:

knapp knapper {

}

4 Gjør alle knappene stille opp uten mellomrom mellom dem ved å sette margin lik negative fire piksler:

knapp knapper {

margin-right: -4px;
}

Dette fungerer i alle nettlesere på Windows, bortsett fra i Opera hvor en feil vises på høyre side grensen av den siste knappen. Du trenger en negativ margin fordi det fortsatt vil være mellomrom mellom knappene hvis du setter margene til null.

5 Sett grensen til enten "0" eller en ramme stil som du selv velger:

knapp knapper {

margin-right: -4px;
border: 1px solid black;
}

Slå av grensene vil føre til at nettleseren til å droppe sin standard styling av knappen. Deretter kan du designe knappen slik du vil.