Avatar billede recryl Nybegynder
30. september 2010 - 01:10 Der er 1 kommentar og
1 løsning

Ulige padding for sidste li-element?

Hej,

Jeg et stødt på et underligt CSS-problem, som jeg ikke har kunnet finde svar på på Google.

Det hurtigste er nok at vise problemet (husk at se kildekoden): http://bykristian.com/help.html

Padding'en er større i højre side for de første elementer, end for det sidste. Hvis man reducerer padding'en, så rammen får ens tykkelse hele vejen rundt for de første elementer, bliver den højre ramme på det sidste element i stedet forkert. Det er et temmelig underligt problem, synes jeg, selvom kildekoden selvfølgelig heller ikke er helt standard:

1) De tre menulinks er sat op som en unordered list. Hvert li-element har en sort baggrund, og li-elementets padding bestemmer hvor meget af den sorte baggrund der ses.
2) links (<a>) har en hvid baggrundsfarve, som udvides med en padding.

Hvis ikke det var for padding-problemet ville den viste løsning muliggøre at li-elementer kan have en baggrundsfarve og effektivt 2 border-farver. Dette kan løse et designproblem jeg har, og stadig tillade at menuen genereres automatiseret ud fra en database, da der blot er tale om en uordnet liste med links.

Jeg har observeret problemet i Firefox 3.6, Safari 5 samt Chrome 6, men sjovt findes problemet ikke i Opera 10.6. Hvis nogen har et forslag til hvordan problemet kan løses, ville jeg blive meget glad.
Avatar billede recryl Nybegynder
30. september 2010 - 01:16 #1
Padding'en fordeler sig tilsyneladende ensartet hvis man bruger float:left fremfor display:inline (for at få li-elementerne til at stå på én linie, fremfor hver sin linie.) Jeg ville foretrække ikke at være tvunget til at bruge float:left, men det lader til at være en bug som må omgås - eller har nogen en forklaring/løsning?
Avatar billede Jim Rasmussen Novice
11. oktober 2010 - 00:32 #2
li {
    display: inline;
    background-color: #000;
    margin-right: 10px;
    padding: 22px 2px;
    border: 1px solid red;
}

Du bruger display:inline; Brug istedet display:inline-block; Så burde det virke.

Mvh Jim :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Alle kurser indenfor Microsoft 365 – både til begyndere og øvede.

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester