Sådan fjerner du indrykning i en css-liste. CSS: Fjern indrykning fra listen over links

Når du opretter en blok med en liste over links, anbefales det generelt at bruge egenskaben display med blok- eller inline-blok-attributterne, hvilket vil øge størrelsen af det aktive linkfelt. Store aktive linkfelter forbedrer elementernes anvendelighed; store elementer er nemmere at navigere med musen.

Elementer med display: blok gengives som blokelementer.

Et element med display: inline-blok gengives som et blokelement, der omslutter andre elementer, som om det var inline. Indholdet er formateret som et blokelement, og selve elementet er formateret som inline.

Lad os se på et simpelt eksempel med en liste over links:

Denne lille
piggy gik til
marked

Hvis du ikke ændrer stilen på links, svarer størrelsen på deres aktive felter til størrelsen af teksten i dem.

Vi kan forbedre dette ved at gøre det aktive feltstørrelse til bredden af det overordnede element.

Ul a ( display: blok; )

Vi kan gøre det endnu bedre.

Sørg for, at listeelementer ikke har felter i modsætning til links.
Links har ikke margener, fordi marginer ikke er det aktive område af elementerne.

ul li ( polstring: 0; margin: 0; ) ul a ( polstring: 5px; display: blok; )

Artiklen består af indlysende ting, men ganske ofte kan vi finde blokke af links på internettet, der ikke er "vansiret" af forstørrede aktive felter.

Original artikel: Keep Margins Out of Link Lists Af: Chris Coyier den 29/11/2010

Opgave

Fjern polstring omkring punktopstilling eller nummererede lister.

Løsning

Brug en egenskab med margen og polstringsstil med en nulværdi for UL- eller OL-vælgeren, afhængigt af listetypen, som vist i eksempel 1.

Eksempel 1: Listeindrykning

HTML5 CSS 2.1 IE Cr Op Sa Fx

Listeindrykning

Cheburashka
Krokodille Gena
Shapoklyak

Resultatet af dette eksempel er vist i fig. 1.

Ris. 1. Liste uden lodrette og vandrette indrykninger

Bemærk, at listemarkører, der vises i venstre kant af websiden, forsvinder. For kun at fjerne top- og bundmargen uden at flytte listen til venstre, skal du bruge egenskaberne margin-top og margin-bund (eksempel 2).

Eksempel 2: Listeindrykning

HTML5 CSS 2.1 IE Cr Op Sa Fx

Listeindrykning

Cheburashka
Krokodille Gena
Shapoklyak

Blandt de sjældent diskuterede fordele ved CSS er evnen til at overlejre baggrundsbilleder for at opnå forskellige effekter. Ifølge CSS2-standarden kræver hvert baggrundsbillede et separat HTML-element. I de fleste tilfælde giver den typiske kode, der beskriver almindelige grænsefladekomponenter, os nogle få HTML-elementer. Et sådant tilfælde er bogmærkebaseret navigation. Det er tid til at tage kontrollen over bogmærker tilbage, som konstant vokser i popularitet som et primært navigationsværktøj. Og nu, takket være omfattende CSS-support, kan vi forbedre kvaliteten og udseendet af bogmærker på vores websteder. Du er sikkert allerede klar over, at CSS kan bruges til at tæmme en simpel uordnet liste. Du har sikkert endda set lister med bogmærkedesign, der ser sådan ud: Hvad nu, hvis vi kunne tage koden nøjagtigt fra det forrige eksempel og forvandle bogmærker til noget, der ligner dette: Med en simpel CSS er det muligt. Hvad er nyt? Mange af de CSS-bogmærker, jeg har set (bogmærker baseret på CSS) lider af monotoni i deres design: farvede rektangler, muligvis med en kontur, det aktuelle bogmærke uden en kontur, farven ændres for svævetilstanden. Er dette virkelig alt, hvad CSS har at tilbyde? Flere rektangler med samme farvefyld? Før CSS blev udbredt, var der en masse nye ideer inden for navigationsdesign: finurlige former, smarte farveovergange, emulering af virkelige grænseflader. Dette design var imidlertid stærkt afhængig af komplekse strukturer af rasteriseret tekst og flere indlejrede tabeller. Det var besværligt at redigere tekst eller ændre rækkefølgen af bogmærker. Det var umuligt at skalere tekst eller forårsage alvorlige problemer med sidesammensætningen. Almindeligt tekstnavigation er let at redigere og indlæses meget hurtigere end rasteriseret tekstnavigation. Også selvom vi kan tilføje en alt-attribut til hvert billede, er almindelig tekst stadig mere er offentligt tilgængelig, fordi den kan skaleres. Så det er ingen overraskelse, at almindelig tekstnavigation gør et comeback inden for webdesign. Men fremkomsten af CSS-bogmærker har indtil videre været et skridt tilbage i design, og bestemt ikke noget, der kan indgå i en designportefølje. Nye teknologier (som CSS) skulle gøre det muligt at skabe noget bedre og med samme designkvalitet som at bruge bitmap-baserede tabeller og bogmærker. Skydedørsmetoden Vi kan skabe smukke, virkelig fleksible UI-elementer, der udvider og trækker sig sammen baseret på tekststørrelse ved at bruge to separate baggrundsbilleder. Den ene er til venstre side af bogmærket, den anden er til højre. Forestil dig, at dette par billeder er skydedøre, der dækker en døråbning. Disse døre glider og overlapper mere, hvis døråbningen er smal, og omvendt glider og overlapper de mindre, hvis du skal lukke et bredere rum. Dette er vist på illustrationen: Ifølge denne model overlapper et billede en del af et andet. Hvis vi antager, at der er noget unikt rundt om kanterne af vores billeder, såsom det afrundede hjørne af et bogmærke, er det usandsynligt, at vi vil have ét billede fuldt ud dækket en anden bagved. For at forhindre dette i at ske, vil vi gøre det forreste (i vores tilfælde venstre) billede så smalt som muligt. Men samtidig skal billedet være bredt nok til at bevare dets synlige unikke karakter. I vores tilfælde er de afrundede hjørner unikke, så det forreste billede vil være bredden af denne afrundede del af billedet: Hvis størrelsen på bogmærket øges som følge af for eksempel at skalere teksten, vil vores billeder spredes ud. til siderne og afslører et ubehageligt hul. Derfor skal omfanget af acceptabel udvidelse vurderes. Hvor meget kan et objekt vokse, når tekst skaleres i browseren? Realistisk set skal du forvente en stigning på op til 300 %. For at kompensere for denne vækst skal du strække baggrundsbillederne. I vores eksempel vil vi lave bagbilledet (højre side) 400x150 pixels i størrelse, og forbilledet 9x150 pixels. Glem ikke, at baggrundsbilleder kun er synlige i "døråbningen" af det element, de er anvendt på ("døråbning" - indholdsområde + polstring). Begge vores billeder er knyttet til de ydre hjørner af deres respektive elementer. De synlige dele af disse billeder kombineres inde i døråbningen og danner formen af et bogmærke: Når bogmærket forstørres, flyttes billederne fra hinanden for at fylde den bredere åbning, og det synlige område af billederne bliver også større: For vores eksempel , Jeg oprettede to billeder i Photoshop med en blød, simulerende tredimensionalitet , toning. For et af bogmærkerne gjorde jeg fyldningen lysere og gjorde stregen mørkere - denne mulighed vil repræsentere det "aktuelle" bogmærke. Efter den valgte model med venstre og rigtige billeder, skal vi skære billedet i to dele: Det samme skal gøres med lysbilledet for det aktuelle bogmærke Når vi har alle 4 billeder, (1, 2, 3, 4) kan vi begynde at oprette koden og CSS til vores bogmærker.Oprettelse af bogmærker Efterhånden som du bliver mere fortrolig med at oprette vandrette lister ved hjælp af CSS, vil du bemærke mindst to måder at placere grupper af objekter på i en enkelt række. Hver har sine egne fordele og ulemper. Begge kræver nogle ret komplekse aspekter af CSS, som hurtigt kan blive forvirrende. Den første metode bruger inline-elementer, den anden bruger float-egenskaben. Den første metode - måske den mere almindelige - involverer at ændre visningsegenskaben til "inline". "Linje"-metoden er attraktiv i sin enkelhed. Det fører dog til problemer i implementeringen af vores metode Skydedøre i nogle browsere. Den anden metode, som vi vil fokusere på, bruger flydende model at arrangere listeelementer i en vandret række. Den flydende model kan dog også være skuffende. Hendes modstridende adfærd krænker nogle gange al tænkelig logik. Alligevel kan en generel forståelse af, hvordan man håndterer flere flydende elementer og kende pålidelige måder at "forlade" en flydende række (eller indeholde den i en container) gøre underværker. Vi prøver at placere flere flydende elementer inde i et andet flydende containerelement. Dette skal gøres, så den ydre forældreflyder helt omgiver de indre flydere. Så kan vi tilføje en baggrundsfarve eller baggrundsbillede bag vores bogmærker. Det er vigtigt at huske, at positionen af elementet efter bogmærkerne skal gendannes ved hjælp af clear CSS-egenskaben. Så vil flydende bogmærker ikke kunne påvirke placeringen af andre sideelementer. Lad os starte med følgende kode: · Forside · Nyheder · Produkter · Om · Kontakt I praksis kunne #header-blokken f.eks. indeholde et logo og en søgeformular. I vores eksempel vil vi forkorte href-værdien for hvert link til "#". Det er klart, at i det virkelige liv vil stien til en fil eller mappe blive angivet i stedet for dette ikon. Lad os begynde at arbejde med CSS ved at tildele en float-egenskab til #header-beholderen. Dette sikrer, at containeren faktisk "holder" listeelementerne, som også vil flyde. Siden vi lavede #headeren flydende, er vi nødt til at give den en bredde på 100 %. Vi tilføjer også en midlertidig gul baggrund for at sikre, at dette overordnede element strækker sig i hele bredden bag bogmærkerne. Og endelig, lad os indstille et par grundlæggende skrifttypeegenskaber for at sikre et samlet udseende af elementerne: #header ( float:left; width:100%; background:yellow; font-size:93%; line-height:normal; ) Vi sætter også en nulværdi for marginer og indrykning af ul- og li-elementerne og fjerner listemarkøren. For alle listeelementer vil vi skrive en float:left-erklæring: #header ul ( margin:0; padding:0; list-style:none; ) #header li ( float:left; margin:0; padding:0; ) For links vil vi indstille blokvisning, så vi kan kontrollere, hvad der sker uden at bekymre os om den inline-model: #header a ( display:blok; ) Så tilføjer vi vores højre baggrundsbillede til listeelementet (ændringer og tilføjelser vises med fed skrift) : #header li ( float:left ; background:url("norm_right.gif") no-repeat højre top; margin:0; padding:0; ) Før du tilføjer venstre baggrundsbillede, lad os holde pause og se, hvad vi har gang i dette punkt i eksempel 1. (Ignorer den regel, jeg anvendte på body-elementet i eksempelfilen. Den indstiller bare de grundlæggende værdier for marginer, polstring, farver og tekst.) - - - Nu kan vi placere det venstre billede foran det højre ved at at anvende det på linket (vores interne element). Lad os straks tilføje en polstring for at flytte teksten væk fra bogmærkets kanter: #header a ( display:block; background:url("norm_left.gif") no-repeat left top; padding:5px 15px; ) Resultatet er vist i eksempel 2. Vores bogmærker begyndte at tage form. Lad os på dette tidspunkt henvende os til de forvirrede IE5/Mac-brugere, der spørger sig selv: "Hvad sker der her? Bogmærker stables lodret og strækkes over hele skærmen." Bare rolig, vi kommer snart til dig. I mellemtiden skal du bare holde øje med, hvad der sker, eller skifte midlertidigt til en anden browser og være sikker på, at vi snart vil løse IE5/Mac-problemet. - - - Nu hvor billederne til simple bogmærker har taget deres plads, lad os indstille billederne til det aktuelle bogmærke. Lad os gøre dette ved at få adgang til listeelementet med id="current" og linket inde i det. Da vi ikke ændrer andre baggrundsegenskaber end baggrundsbilleder, vil vi bruge egenskaben baggrundsbillede: #header #current ( background-image:url("norm_right_on.gif"); ) #header #current a ( baggrundsbillede :url( "norm_left_on.gif"); ) Nederst i vores bogmærker har vi brug for en form for omrids. Men at anvende grænseegenskaben til den overordnede #header vil ikke tillade os at "blode" det aktuelle bogmærke gennem den grænse. I stedet opretter vi et nyt billede med det streg, vi ønsker langs dets nederste kant. Og mens vi er i gang, lad os tilføje en subtil gradient for at få det til at se sådan ud: Vi anvender dette billede på baggrunden af vores #header-beholder (i stedet for den gule farve, vi har angivet tidligere), flytter det til bunden af beholderen, og tildel en baggrundsfarve, der matcher topfarven på den gradient, vi oprettede. . Vi fjerner også den polstring, vi oprindeligt tilføjede for body-elementet, og tilføjer 10 pixels polstring til toppen, venstre og højre for ul-elementet: #header ( float:left; width:100%; background:#DAE0D2 url ("bg.gif") gentag -x bottom; font-size:93%; line-height:normal; ) #header ul ( margin:0; padding:10px 10px 0; list-style:none; ) For at afslutte arbejdet på bogmærket, er det tilbage at "lække" det aktuelle bogmærke over grænsen, som vi allerede har diskuteret ovenfor. Du tror måske, at vi ville anvende en bundramme på vores bogmærker, der matcher farven på det nederste streg på baggrundsbilledet af #header-elementet, og derefter ændre kantfarven for det aktuelle bogmærke til hvid. Dette ville dog resultere i et lille "trin" synligt for det opmærksomme øje. Men hvis vi ændrer polstringen for linkene, kan vi skabe skarpe og rette vinkler inde i det aktuelle bogmærke, som vist på det forstørrede billede: Vi opnår dette ved at reducere bundpolstringen for et almindeligt link med 1 pixel (5px - 1px = 4px), og derefter tilføje denne pixel til det aktuelle link: #header a (display:block; background:url("norm_left.gif") no-repeat left top; padding:5px 15px 4px; ) #header #current a ( background-image:url(" norm_left_on.gif"); padding-bottom:5px; ) Denne ændring gør den nederste kant synlig gennem almindelige bogmærker, men skjuler den for det aktuelle bogmærke. Vi får eksempel 3. Afsluttende trin Et omhyggeligt øje kunne i det foregående eksempel have bemærket de hvide områder i hjørnerne af bogmærkerne. Disse uigennemsigtige hjørner forhindrer bagbilledet i at være synligt gennem venstre hjørne af forbilledet. Teoretisk set kunne vi få disse hjørner til at have samme farve som baggrunden bag dem. Men vores bogmærker kan stige i højden, og så vil baggrundsgradientbaggrunden bevæge sig ned, hvilket vil føre til et misforhold i farven på hjørnerne og baggrundsgradienten. I stedet vil vi ændre vores billeder ved at gøre deres hjørner gennemsigtige. Hvis der anvendes anti-aliasing på bogmærkets kontur, indstiller vi den gennemsigtige farve (mat) til gennemsnitsværdien af baggrundsgradienten på bagsiden. Nu hvor hjørnerne er gennemsigtige, er et stykke af det højre billede synligt gennem det gennemsigtige hjørne af venstre. For at undgå dette skal du tilføje en lille venstre polstring til listeelementet svarende til bredden af venstre billede (9px). For at holde teksten centreret efter tilføjelse af indrykning til et listeelement, skal du fjerne den samme mængde venstre indrykning fra linket (15px - 9px = 6px): #header li ( float:left; background:url("right.gif) ") no-repeat højre top; margin:0; padding:0 0 0 9px; ) #header a ( display:block; background:url("left.gif") no-repeat venstre top; padding:5px 15px 4px 6px ;) Men denne mulighed vil heller ikke passe os, da det venstre billede nu er flyttet væk fra venstre kant af bogmærket med 9 pixels af det tilføjede indrykning. Nu hvor de indvendige kanter af venstre og højre "døråbninger" møder hinanden, behøver vi ikke længere at holde det venstre billede foran. Og vi kan ændre rækkefølgen af baggrundsbillederne ved at anvende dem på modsatte elementer. Vi skal også ændre billederne for det aktuelle bogmærke: #header li ( float:left; background:url("left.gif") no-repeat left top; margin:0; padding:0 0 0 9px; ) #header a, #header strong, #header span ( display:block; background:url("right.gif") no-repeat højre top; padding:5px 15px 4px 6px; ) #header #current ( background-image:url(" left_on. gif"); ) #header #current a ( background-image:url("right_on.gif"); padding-bottom:5px; ) Efter at have gjort dette, får vi eksempel 4. Bemærk, at de trin, vi tog for at skabe gennemsigtige hjørner, resulterede i en lille "død" zone i venstre side af fanen, hvor den ikke reagerer på musebevægelse. Den døde zone er uden for teksten, men den er stadig mærkbar. Det er ikke nødvendigt at bruge gennemsigtige billeder til hver side af vores bogmærke. Hvis vi foretrækker ikke at have et dødt område på vores bogmærke, skal vi bare bruge et solidt fyld bag bogmærkerne i stedet for en gradient og gøre bogmærkernes hjørner i samme farve. Indtil videre vil vi holde hjørnerne gennemsigtige. [ I IE/Win eksisterede den nævnte "døde" zone, allerede før disse trin blev taget, og på alle sider af linkteksten. Løsningen på dette problem er dækket i den næste artikel i serien Sliding Doors of CSS, Part II.- ca. oversætter ] - - - Og endelig, prikken over i'et. Alt på én gang: gør al teksten fed, teksten på almindelige bogmærker brun, og på de nuværende bogmærker mørkegrå, tildel den samme farve til teksten for svævelinktilstanden, fjern understregningen af links. Alle tilføjelser og ændringer foretaget indtil dette punkt er præsenteret i eksempel 5. En anden metode til at sikre kompatibilitet Efter at have set på eksempel 2 erkendte vi, at der var et problem med IE5/Mac, som strakte bogmærker til hele vinduets bredde, foring dem op lodret under hinanden. Ikke helt den effekt, vi leder efter. I de fleste browsere formindsker anvendelsen af float-egenskaben på et element det til den mindst mulige størrelse bestemt af dets indhold. Hvis det flydende element indeholder et billede (eller selv er et billede), vil det blive komprimeret til billedets bredde. Hvis det kun indeholder tekst, vil det krympe til bredden af den længste tekstlinje, der ikke indeholder bindestreger. Der opstår problemer i IE5/Mac, når et blokelement med width auto placeres inde i et flydende element. I dette tilfælde krymper alle browsere det flydende element til den mindst mulige bredde uden at være opmærksom på det indre blokelement. Men det gør IE5/Mac ikke i den beskrevne situation. I stedet strækker den de flydende og indre blokelementer til den fulde tilgængelige bredde. For at omgå denne adfærd skal vi også anvende float på linket, men kun for IE5/Mac, uden at det påvirker andre browsere. Lad os først tilføje en float til en eksisterende regel. Så bruger vi Backslash-metoden til at skjule fra IE5/Mac en ny regel, der fjerner floats for andre browsere: #header a ( float:left; display:block; background:url("right.gif") no-repeat right top; padding:5px 15px 4px 6px; text-decoration:none; font-weight:bold; color:#765; ) /* Kommenteret Backslash Hack skjuler regel fra IE5-Mac \*/ #header a (float:none;) /* Afslut IE5-Mac-hack */ Som i eksempel 6 viser IE5/Mac nu bogmærker som forventet. For andre browsere er intet ændret. IE5/Mac indeholder et stort antal CSS-fejl, som blev rettet i IE5.1. Sliding Door-metoden lider også af disse fejl i IE5/Mac. Deres antal overskrider alle tænkelige grænser, og jeg vil ikke bekæmpe dem. Og da opgraderingen til 5.1 har været tilgængelig for alle i et stykke tid, er procentdelen af Mac'er med OS 9 og IE5/Mac installeret konstant faldende og nærmer sig nul. Indstillinger Vi har lige kigget nærmere på Sliding Door-metoden, som giver dig mulighed for at oprette fanebladsnavigation baseret på almindelig tekst, lagt ud ved hjælp af en unummereret liste og links og ændret med et par CSS-regler. Denne navigation indlæses hurtigt, er nem at vedligeholde, og teksten inde i den kan skaleres betydeligt i enhver retning uden at forstyrre designet. Det er overflødigt at sige, hvor fleksibel denne metode er, når du opretter en sofistikeret navigation? Brugen af denne teknik er kun begrænset af vores fantasi. Det sidste eksempel illustrerer kun én mulighed. Men dette eksempel bør ikke begrænse vores ideer. Bogmærker behøver for eksempel ikke at være symmetriske. Jeg lavede hurtigt en anden version af bogmærkerne, der brugte simple farver, kantede former og en bredere, mere kompleks venstre side. Som mulighed 2 viser, kan vi frit ændre rækkefølgen af venstre og højre billeder afhængigt af designet. Med omhyggelig planlægning og kunstfærdig håndtering af billeder kan du droppe den nederste kant til fordel for en stilkombination af billeder med en baggrund bag dem, som vist i mulighed 3, som jeg oprettede. Hvis din browser understøtter skift mellem alternative stilarter, kan du se alle de muligheder, der præsenteres ved at åbne denne masterfil og skifte mellem typografiark i den. [ I NN7.1 gives adgang til alternative stilarter gennem hovedmenuen Vis>Brug stil, i Opera 7.20 gennem hovedmenuen Vis>Stil, i IE/Win er der ingen sådan mulighed - ca. oversætter] Andre effekter kan tilføjes til den anvendte teknik, som vi ikke overvejer her. I vores eksempel ændrede vi tekstfarven for svævetilstanden, men hvorfor ikke ændre hele baggrundsbilledet for interessante rollover-effekter. Med to indlejrede HTML-elementer i vores kode kan vi altid bruge CSS til at overlejre baggrundsbilleder og opnå effekter, vi aldrig havde drømt om. I vores eksempel oprettede vi en vandret række af bogmærker, men skydedørsmetoden kan bruges i mange andre tilfælde. Hvilken anvendelse vil du foreslå for denne metode?