23. juli 2004 - 09:12 Der er 11 kommentarer

Listeelementer med CSS

Jeg har lavet noget HTML som viser/gerne skulle vise en liste med prikket understregning som kun går ud til tekstens kant.

HTML'en ser indtil videre således ud:

<html>
    <body>
        <div style="display: inline; border-bottom: 1px dotted red;">listeelement 1</div><br />
        <div style="display: inline; border-bottom: 1px dotted red;">listeelement 2</div>
    </body>
</html>                           

Jeg har indsat et BR tag for at få liste-elementerne på hver sin linje.

Hvad skal der stå i style-attributten for at få den samme effekt som BR taget giver?

Jeg har forsøgt mig med "display:block" men så går understregningen udover kanten af teksten, og jeg
syntes heller ikke at nogle af af de andre værdier for "display" virker.
Avatar billede powernodes Nybegynder
23. juli 2004 - 09:15 #1
Sådan her:

        <div><span style="border-bottom: 1px dotted red;">listeelement 1</span></div>
        <div><span style="border-bottom: 1px dotted red;">listeelement 2</span></div>
Avatar billede powernodes Nybegynder
23. juli 2004 - 09:16 #2
Issuet er at et <div> er et block element. Derfor "line-breaker det", men border skal på et inline element (<span>).
23. juli 2004 - 09:20 #3
Det var selvfølgelig en anden løsning, men jeg kan ikke rigtig forstå at man ikke bare kan nøjes med ét tag og altså skal have enten et BR tag eller et DIV tag oveni.
Avatar billede powernodes Nybegynder
23. juli 2004 - 09:23 #4
Det er jo netop fordi du både skal bruge en block OG en inline effect.
Men hvad er problemet med et <br />?
Avatar billede powernodes Nybegynder
23. juli 2004 - 09:29 #5
3. mulighed:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
ul#mylist {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
ul#mylist * {
  list-style-type: none;
  white-space: nowrap;   
  border-bottom: 1px dotted red;
}
</style>
</head>
<body>

<div style="width:40px;">
  <ul id="mylist">
    <li>Liste 1</li>
    <li>Liste 2</li>
    <li>Liste 3</li>
    <li>Liste 4</li>
  </ul>
</div>

</body>
</html>


Her styrer du border bredde med container div'en.
Avatar billede roenving Novice
23. juli 2004 - 09:32 #6
-- og selv om peter måske er lidt langsom ind imellem (*G*) er det jo faktisk essentielt, at man bruger de elementer, som er beregnet til det, når man skal lige skal lave noget html !-)
Avatar billede powernodes Nybegynder
23. juli 2004 - 10:03 #7
:o)
Avatar billede detverdner Nybegynder
26. juli 2004 - 17:50 #8
roenving har helt ret. Så jeg undrer mig da lidt over, at han ikke rydder helt op i koden :)

Hvad snakker jeg om? Jo, DIV-tag'et er ret beset unødvendigt her. Det er nok at sætte bredde på UL:

ul#mylist { . . . . ; width: 40px; }

Dermed er HTML'en minimeret.

Husk i øvrigt, at borderen bliver _mindst_ lige så lang, som bredden sættes til. I W3C-standardernes hellige navn burde man vel bruge min-width i stedet (fx: min-width: 1%;). Desværre understøttes det ret uens i de forskellige browsere - og slet ikke i IE. Derfor er det nok værd at beholde width, hvad enten den gives 40px, 1% eller 4ex.
26. juli 2004 - 20:46 #9
Hvad betyder * i linjen:

ul#mylist * {
Avatar billede detverdner Nybegynder
26. juli 2004 - 20:52 #10
* er et jokertegn. Det betyder, at reglen gælder for alle HTML-elementer, som er "børn" af ul#mylist.
Avatar billede detverdner Nybegynder
04. august 2004 - 17:13 #11
Hov - kan se jeg trykkede "svar" - var nu ment som en kommentar. Gi' roenving no'en point hvis det virker for dig :)
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