Avatar billede htx98i17 Professor
16. juli 2012 - 15:35 Der er 9 kommentarer og
1 løsning

Fjern mellemrum bl.a.

Jeg har nedenstående kode.

Den viser mellemrum/margin mellen punkterne i listen.

Det burde være en smal sag, men jeg kan simpelthen ikke få den til at fjerne mellemrummene mellen punkterne i listen.

Kan nogen det?

Hvis jeg ændrer width i class fra 100 og til noget større, gør det heller ingen forskel.
Hvorfor nu ikke det?


<!DOCTYPE html>
<HTML>
    <HEAD>
        <TITLE>TITEL</TITLE>
        <META http-equiv="content-type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="stylesheet.php" />
        <style>
       
            ul.oversigt {
                list-style-type    :    none;
                margin            :    1px;
                padding            :    0px;
            }
           
            li.oversigt_overskrift {
                width                :    100px;
                display            : inline;
                padding            :    3px;
                margin            :    0px;
               
                border            :    1px SOLID #CCCCCC;
                font-size        :    8pt;
            }
       
        </style>
       
    </HEAD>
   
<BODY bgcolor="#FFFFFF" >
   
        <div style="position: relative; margin: auto; width: 700px; height: 500px; border: 0px SOLID #CCCCCC;"  >
           
            <div style="position: relative; margin: auto; height: 400px; overflow-x:auto; white-space: nowrap" >
               
                <ul class="oversigt" >
                        <li class="oversigt_overskrift" >14/07 2012</li>
                        <li class="oversigt_overskrift" >15/07 2012</li>
                        <li class="oversigt_overskrift" >16/07 2012</li>
                        <li class="oversigt_overskrift" >17/07 2012</li>
                        <li class="oversigt_overskrift" >18/07 2012</li>
                        <li class="oversigt_overskrift" >19/07 2012</li>
                        <li class="oversigt_overskrift" >20/07 2012</li>
                        <li class="oversigt_overskrift" >21/07 2012</li>
                        <li class="oversigt_overskrift" >22/07 2012</li>
                        <li class="oversigt_overskrift" >23/07 2012</li>
                        <li class="oversigt_overskrift" >24/07 2012</li>
                        <li class="oversigt_overskrift" >25/07 2012</li>
                   
                </ul>
               
               
            </div>
           
        </div>

</BODY>
</HTML>
Avatar billede olebole Juniormester
16. juli 2012 - 16:03 #1
<ole>

Du har gjort LI elementerne til inline elementer. Så skal der renderes et mellemrum mellem dem, når du skrver dem på hver sin linje. Du ville sikkert ikke undre dig, hvis det var SPAN eller A elementer  *o)

/mvh
</bole>
Avatar billede htx98i17 Professor
16. juli 2012 - 16:05 #2
Er det så her, man ville bruge almindelig <tabel>?
Avatar billede olebole Juniormester
16. juli 2012 - 16:06 #3
Løsningen er at skrive LI elementerne på én linje - hvilket giver sig selv, hvis du udskriver koden dynamisk. Ellers kan du skrive noget i stil med:

<ul class="oversigt" >
    <li class="oversigt_overskrift" >14/07 2012</li><li
        class="oversigt_overskrift" >15/07 2012</li><li
        class="oversigt_overskrift" >16/07 2012</li><li
Avatar billede olebole Juniormester
16. juli 2012 - 16:07 #4
"Er det så her, man ville bruge almindelig <tabel>?" >> Nej, det ville være et fejlvalg
Avatar billede htx98i17 Professor
16. juli 2012 - 16:15 #5
Det kan jeg godt se.

Men hvorfor generere browseren et mellemrum der hvor der i virkeligheden er TAB ?
Avatar billede htx98i17 Professor
16. juli 2012 - 16:18 #6
hvis jeg så vil kontrollere bredden af <li> elementerne skal jeg så ligge et block element indeni?
Avatar billede htx98i17 Professor
16. juli 2012 - 16:29 #7
Jeg skal lave sådan en oversigt over ledige tider. Kolonne som dato og rækker som tider. Er den 16. juli kl. 10 eksempelvis ledig skal baggrundsfarven være grøn.

Så der skal ikke rigtig være noget indhold i <li> elementerne som kan bestemme bredden.

Så jeg skal gerne have noget hvor jeg kan styre bredden.
Det var også derfor jeg spurgte om <tabel> ville være egnet til dette?
Avatar billede olebole Juniormester
16. juli 2012 - 17:25 #8
God idé, men inline elementer kan/må ikke indeholde block elementer. I stedet giver du dem display:inline-block, så opfører de sig 'udadtil' som inline elementer og 'indadtil' som block elementer.

Hvis jeg nu skrev:

Ole
Bole

- eller:

<span>Ole</span>
<span>Bole</span>

- ville det sikkert ikke undre, begge dele renderes som Ole Bole. Det er præcis det samme, der sker med dine LI elementer  *o)
Avatar billede olebole Juniormester
16. juli 2012 - 17:29 #9
.oversigt li {
  display: inline-block;
}
.oversigt li div {
    width: 120px;
}

- vil kunne gøre det, hvis du lægger et DIV i dine LI elementer
Avatar billede htx98i17 Professor
23. juli 2012 - 14:57 #10
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
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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