Är det någon som vet hur man gör för att texten i en punktlista inte hamnar direkt under punkten vid radbrytning? dvs texten ska hamna på samma vertikala rad.
Tack på förhand
HTML punktlista
16 svar · 2 116 visningar · startad av Heatseeker
floatar dina li element och kör list-style på vad du nu vill ha:
ul {
padding: 0;
}
li {
float: left;
list-style: disc inside none;
margin: 0 5px;
}
något i den stilen kanske?
Det är så en punktlista ska se ut automatiskt, om man inte gör någonting alls.
Men jävlas det och du måste ordna detta manuellt, så är det
li {list-style: outside;}
i stilmallen som gäller.
Testa exemplet nedan i en webbläsare och byt ut "outside" mot "inside":
<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--
ul {
margin: 200px auto 0px;
width: 500px;
}
li {
list-style: outside;
}
-->
</style>
</head>
<body>
<ul>
<li>
Velit esse cillum dolore lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, ut labore et dolore magna aliqua. Duis aute irure dolor ullamco laboris nisi quis nostrud exercitation. Cupidatat non proident, excepteur sint occaecat ut enim ad minim veniam.
</li>
<li>Quis nostrud exercitation ullamco laboris nisi excepteur sint occaecat. In reprehenderit in voluptate ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt ut enim ad minim veniam, eu fugiat nulla pariatur. Excepteur sint occaecat mollit anim id est laborum. Ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt ut enim ad minim veniam, lorem ipsum dolor sit amet. Qui officia deserunt eu fugiat nulla pariatur. Consectetur adipisicing elit, ullamco laboris nisi cupidatat non proident. In reprehenderit in voluptate ut enim ad minim veniam, excepteur sint occaecat. Lorem ipsum dolor sit amet, ut labore et dolore magna aliqua.</li>
<li>Duis aute irure dolor excepteur sint occaecat ut labore et dolore magna aliqua. In reprehenderit in voluptate lorem ipsum dolor sit amet, velit esse cillum dolore. Cupidatat non proident, quis nostrud exercitation ullamco laboris nisi. Sunt in culpa eu fugiat nulla pariatur. Mollit anim id est laborum. Consectetur adipisicing elit, velit esse cillum dolore excepteur sint occaecat. Duis aute irure dolor quis nostrud exercitation. Duis aute irure dolor quis nostrud exercitation ut labore et dolore magna aliqua. Ullamco laboris nisi excepteur sint occaecat velit esse cillum dolore. Lorem ipsum dolor sit amet, in reprehenderit in voluptate sed do eiusmod tempor incididunt. Quis nostrud exercitation excepteur sint occaecat ut enim ad minim veniam. Sunt in culpa lorem ipsum dolor sit amet, velit esse cillum dolore. Eu fugiat nulla pariatur. Duis aute irure dolor. Ut aliquip ex ea commodo consequat. Quis nostrud exercitation eu fugiat nulla pariatur. Cupidatat non proident, duis aute irure dolor in reprehenderit in voluptate.</li>
</ul>
</body>
</html>
Var det det han/hon menade, ja då så
Den ligger i en tabell:
<table>
<tr>
<td><li>text</li></td>
</tr>
<tr>
<td><li>text</li></td>
</tr>
<tr>
<td><li>text</li></td>
</tr>
</table>
har kört
li {list-style: inside;}
så att prickarna ska hamna i linje med all text ovan.
vad göra?:/
en li få inte ligga fritt, du måste ha en ul lista, ta bort tabellen, finns absolut ingen anledning att använda den i huvudtaget.
ok. Tack!
Men faktum kvarstår att jag måste köra
li{list-style:inside}
för att det ska hamna i linje med texten ovan
Anledningen till att jag ville ha tabell var för att jag har en summa i kr efter som jag inte tyks få i linje.
Hade du gjort 2 st divs då och köra text-align:left på den div där summan ska stå?
Jag har ingen aning vad du försöker återskapa, lägg upp en demo eller använd http://jsfiddle.net , http://jsbin.com eller liknande tjänster att återskapa din befintliga kod.
list-style skulle nog vara outside om jag förstå danne rätt (om inte han missförstått dig)
Är inte så komplicerat.
det jag försöker återskapa är den här texten:
Ordinarie Medlem: 545kr
Familjemedlem: 145kr
Ungdomsmedlem: betalas till Sveriges hundungdom
precis som i det här exemplet så vill inte "1" i "145" hamna i linje med 545 varav min tanke bakom tabellen
Det där är ju absolut tabulär data så jag förstår inte varför du inte skulle använda en tabell bara? Bara för att man inte bör DESIGNA med tabeller så betyder det inte att man inte ska använda dem.
Det där är ju absolut tabulär data så jag förstår inte varför du inte skulle använda en tabell bara? Bara för att man inte bör DESIGNA med tabeller så betyder det inte att man inte ska använda dem.
Det beror nog på av den datan man fick i Heatseeker första exempel:
<table>
<tr>
<td><li>text</li></td>
</tr>
<tr>
<td><li>text</li></td>
</tr>
<tr>
<td><li>text</li></td>
</tr>
</table>
så är detta inte tabell data.
Det beror nog på av den datan man fick i Heatseeker första exempel:
<table> <tr> <td><li>text</li></td> </tr> <tr> <td><li>text</li></td> </tr> <tr> <td><li>text</li></td> </tr> </table>så är detta inte tabell data.
Nej, visst inte. TS visste ju dock vad det rörde sig om för data, bara det att han inte delgav oss det på ett sätt så man förstod det.
körde den som du gjorde: http://jsbin.com/exuhux/1/edit
egentligen hade jag ju strul på 2 ställen. dels den texten som jag skrev ovan. Sen en där det var lite längre text. Att köra
li{list-style:inside}
fick texten att hamna direkt under punkterna vid radbrytning.
löste det med
li{list-style:outside}
och på det padding-left:xx
låter det som en bra lösning?
Ja
Spontant känns en dl mest enklast/bäst i det här fallet, typ nåt sånt här:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
dd {display:block;float:left;}
dt {float:left;display: list-item;width:150px;clear:both;list-style: inside;}
</style>
</head>
<body>
<dl>
<dt>Ordinarie Medlem:</dt> <dd>545kr</dd>
<dt>Familjemedlem:</dt> <dd>145kr</dd>
<dt>Ungdomsmedlem:</dt> <dd>betalas till Sveriges hundungdom </dd>
</dl>
</body>
</html>
Funkar semantiskt i min värld men gillar att bli överbevisad :)