---
title: "Snygg punktlista med css"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/147034-snygg-punktlista-med-css"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Bengt Carlsson"
published: "2006-05-18T07:12:26.000Z"
updated: "2006-05-18T17:25:19.000Z"
replies: 3
views: 1362
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/147034-snygg-punktlista-med-css"
---

# Snygg punktlista med css

## #1 — Bengt Carlsson, 2006-05-18T07:12Z

Hej 
Jag försöker få till en snygg punktlista i html/css. 
Med snygg menar jag att första raden ska ha ett hängande indrag på -10px (eller valfritt) så att textraderna (jag har flera rader under varje punkt) blir justerade i vänsterkant och punkten "hänger ut" 10 px. Dvs, som en punktlista brukar se ut i t.ex. Word.

Följande kod ser utmärkt ut i Dreamweaver, men blir inte rätt i vare sig IE6, Firefox eller Opera. Den ser annorlunda ut i alla tre. 

\#content ul { 
    padding: 10px 30px 10px 15px; 
    line-height: 110%; 
} 
\#content li { 
    padding-bottom: 8px; 
    text-indent: -10px; 
} 

Någon som stött på problemet och kanske löst det? 
Ännu en fråga - hur styr jag avståndet mellan punkten och texten på första raden?

/Bengt

Permalänk: https://www.webforum.nu/p/147034

## #2 — Nipon, 2006-05-18T08:42Z

Så här skulle jag ha gjort - om jag nu fattar hur du vill ha det...   :) 

```
[B]CSS:[/B]
#content { padding-left: 15px; }
#content ul, li { margin: 0; padding: 0; line-height: 110%; }
#content ul { padding-top: 10px; padding-bottom: 10px; }
#content li { padding-bottom: 8px; }

[B]HTML:[/B]
<div  id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed...</p>
<ul>
<li>Bla bla bla...</li>
<li>Bla bla bla...</li>
<li>Bla bla bla...</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed...</p>
</div>
```

Permalänk: https://www.webforum.nu/p/1818144

## #3 — michno, 2006-05-18T09:39Z

Blir lite osäker på vad du vill ha, för följande kod (som är nästan identisk med din) funkar utmärkt i Firefox och Safari:

```
[b]CSS:[/b]
#content { width: 160px;} //bara för att tvinga texten att radbryta
#content ul { 
      padding: 10px 30px 10px 15px; 
      line-height: 110%;}
#content li { padding-bottom: 8px;} 

[b]XHTML:[/b]
<div id="content">
	<p>Lite vanlig text här</p>
	<ul>
		<li>Första punkten och en del text</li>
		<li>Andra punkten</li>
	</ul>
</div>
```

Permalänk: https://www.webforum.nu/p/1818169

## #4 — Bengt Carlsson, 2006-05-18T17:25Z

Det var Dreamweaver som lurade mig att börja trixa med text-indent. När jag tog bort den, funkade det som det skulle. 
Tack för visat intresse och tankemödan.

/Bengt

Permalänk: https://www.webforum.nu/p/1818433

---

Tråden på webben: https://www.webforum.nu/amne/html-css/147034-snygg-punktlista-med-css