Avatar billede w3dk Novice
22. maj 2017 - 20:53 Der er 4 kommentarer og
1 løsning

CSS på ul list

Hej,

Jeg kæmper lidt med css til min UL liste. Jeg kunne godt tænke mig at få lavet en liste som ser sådan ud:

*    PHP        PHP er et programmeringssprog
            der afvikles fra serveren
*    Javscript    Javscript afvikles i din browser
*    CSS        CSS afvikles også i din broswer
            og benyttes til at give en god
            opsætning i browseren og
            oplevelse for brugeren.

Jeg har pt. en html-kode som denne:
<ul>
    <li><label>PHP</label>PHP er et programmeringssprog der afvikles fra serveren</li>
    <li><label>Javscript</label>Javscript afvikles i din browser</li>
    <li><label>CSS</label>CSS afvikles også i din broswer og benyttes til at give en god opsætning i browseren og oplevelse for brugeren.</li>
</ul>

Style:
<style>
label {
    width: 50px;
    display:inline-block;
}
</style>

Kan nogen gennemskue en løsning??
Avatar billede w3dk Novice
22. maj 2017 - 21:00 #1
I kan se mit ønske her:
www.w3.dk/ul-liste.png

Her er hvad jeg pt. har:
www.w3.dk/ul-liste.php
Avatar billede olsensweb.dk Ekspert
22. maj 2017 - 21:42 #2
lidt hurtigt banket sammen

<!DOCTYPE html>
<html lang="da">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>demo</title>

<style type="text/css">
    ul {
        width: 400px;
    }
label {
    width: 70px;
    display:inline-block;
}
.txt {
    width: 300px;
    display: inline-flex;
}
li:nth-child(even) {
  background-color: red;
}
li:nth-child(odd) {
  background-color: yellow;
}
</style>
</head>
<body>
<ul>
    <li><span><label>PHP</label></span><span class="txt">PHP er et programmeringssprog der afvikles fra serveren</span></li>
    <li><span><label>Javscript</label></span><span class="txt">Javscript afvikles i din browser</span></li>
    <li><span><label>CSS</label></span><span class="txt" >CSS afvikles også i din broswer og benyttes til at give en god opsætning i browseren og oplevelse for brugeren.</span></li>
</ul>
</body>
</html>
Avatar billede w3dk Novice
23. maj 2017 - 13:32 #3
Perfekt.

Er det muligt at man kan fylde hele siden og ikke sætte en begrænsning på bredden så teksten følger skærmen bredde i stedet?
Avatar billede olsensweb.dk Ekspert
23. maj 2017 - 13:56 #4
#3
så skal du regne i procent
her er nogle ca tal

<style type="text/css">
    ul {
       
    }
label {
    width: 15%;
    display: inline-flex;
}
.txt {
    width: 85%;
    display: inline-flex;
}
li:nth-child(even) {
  background-color: red;
}
li:nth-child(odd) {
  background-color: yellow;
}
</style>


men skal det være responsivt ville jeg bruge et framework som feks http://getbootstrap.com/ og ikke rode med procenter
Avatar billede w3dk Novice
23. maj 2017 - 14:27 #5
Den sidder lige i skabet :-)

Tak for hjælpen.
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

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