---
title: "Litet indrag med li/ul?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/102812-litet-indrag-med-li-ul"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Jesper T"
published: "2004-05-03T07:05:57.000Z"
updated: "2004-05-03T13:57:40.000Z"
replies: 6
views: 354
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/102812-litet-indrag-med-li-ul"
---

# Litet indrag med li/ul?

## #1 — Jesper T, 2004-05-03T07:05Z

Jag skulle vilja med en "egna" bullets få en bulletlist att se ut ungefär så här: ![](http://member.webforum.nu/Jesper%20T/li_ul.gif) 
I mitt bifogade exempel så är det ett litet indrag på första raden som motsvarar bildens brädd, hur gör man det?

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

## #2 — Jesper T, 2004-05-03T07:14Z

Gamla goda [devguru](http://www.devguru.com/Technologies/css/quickref/css_liststyleposition.html).
list-style-position: inside;display: list-item;

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

## #3 — Jesper T, 2004-05-03T11:14Z

F-n. Det verkar bara funka i I.E. 

Idéer?

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

## #4 — dectgap, 2004-05-03T11:26Z

```
<style type="text/css">
li {
    list-style: url(img1.png) inside;
}
</style>

...

<ul>
  <li>aaa<br />aaa<br />aaa</li>
  <li>aaa</li>
  <li>aaa</li>
  <li>aaa</li>
</ul>
```

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

## #5 — Jesper T, 2004-05-03T12:31Z

Som synes i [detta](http://member.webforum.nu/Jesper%20T/ul_li.htm) exempel, så hamnar "kulan" för högt upp och texten för nära. 
Skall man korigera det med bilden eller finns det css för detta?

```
<style tyle="text/css">
<!--
li {
	list-style: url(bullet.gif) inside;
    line-height: 16px;
    list-style-type: none;
	margin: 0;
    padding: 0;
	font-family:tahoma,verdana;
	font-size:11px;
	}
	-->
</style>
```

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

## #6 — dectgap, 2004-05-03T13:14Z

En fullösning:

```
<style tyle="text/css">
<!--
li {
	list-style: url(bullet.gif) inside;
    line-height: 16px;
    list-style-type: none;
	margin: 0;
    padding: 0;
	font-family:tahoma,verdana;
	font-size:11px;
	}
li span {
padding-left: expression("0.5em"); // Endast i IE
}
	-->
</style>

...

<div style="width:150px;">
<ul>
	<li><span></span>Bla bla bättan blä, bluddran bluttan Bla bla bättan blä, bluddran bluttan</li>
	<li><span></span>Bla bla bättan blä, bluddran bluttan Bla bla bättan blä, bluddran bluttan</li>
</ul>
</div>
```

Mozilla lägger själv till lite luft runt bilden, så därför skrev jag padding-left-värdet som ett JS-uttryck, eftersom det är IEs egna påhitt.

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

## #7 — Jesper T, 2004-05-03T13:57Z

Det fick bli en ännu fulare lösning. Jag la in lite luft i bilden.
Tack.

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/102812-litet-indrag-med-li-ul