webForumDet fria alternativet

Litet indrag med li/ul?

HTML & CSS

6 svar · 347 visningar · startad av Jesper T

Medlem sedan nov. 20017 144 inlägg
Frågan#1

Jag skulle vilja med en "egna" bullets få en bulletlist att se ut ungefär så här:
I mitt bifogade exempel så är det ett litet indrag på första raden som motsvarar bildens brädd, hur gör man det?

Medlem sedan nov. 20017 144 inlägg
#2

Gamla goda devguru.
list-style-position: inside;display: list-item;

Medlem sedan nov. 20017 144 inlägg
#3

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

Idéer?

Medlem sedan sep. 20021 655 inlägg
#4
<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>
Medlem sedan nov. 20017 144 inlägg
#5

Som synes i detta 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>
Medlem sedan sep. 20021 655 inlägg
#6

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.

Medlem sedan nov. 20017 144 inlägg
#7

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

260 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
134 ms — deklarationer (db)
0 ms — hämta statistik (cache)
121 ms — hämta tråd, inlägg och bilagor (db)
136 ms — ändringar (db)