CODEWITHSUNDEEP
htmlcss
yoel levy
yoel levy

Reputation: 43

How do I move a list's bullet point to the right side of the text?

The bullet image has to be on the right side of the text. Right now, it appears on the left side of the page, by default. How can I change this?

I have this CSS:

.landingpage ul{
list-style:none;
margin:0 0 1em 15px;
padding: 0;
list-style-position: inside;

}
.landingpage ul li{
line-height:1.3em;
margin: .25em 0;
padding: 0 0 0 15px;
background:url(../images/star.png) no-repeat 0 4px;
  list-style-type: none;
}
.landingpage li ul{
margin:0 0 0 30px;
list-style:disc;
}
 .landingpage li ul li{
padding-right:0;
background:none;
}

/* Holly Hack to fix ie6 li bg */
/* Hides from IE-mac \*/
* html li{height: 1%;}
/* End hide from IE-mac */

@media print{
.landingpage ul {
list-style:disc;
margin-right:30px;
}
 .landingpage ul li {
padding-right:0px;
background:none;
}
}

This is my HTML:

<div class="landingpage">
<ul >
<li>מפחד מהמלחמה</li>
</div>

</ul>

Upvotes: 4

Views: 7390

Answers (2)

TylerH
TylerH

Reputation: 21086

The reason you don't have a bullet point is because of list-style: none;

Remove list-style: none; from .landingpage ul and, if you wish to, you can add direction: rtl; to have the list appear on the right side of the screen instead of the left.

.landingpage ul{
    margin:0 0 1em 15px;
    padding: 0;
    list-style-position: inside;
    /* direction: rtl; */
}

JSFiddle Demo

Upvotes: 1

karan3112
karan3112

Reputation: 1867

Try the below css

CSS

li{
direction:rtl;
}
ul{
  list-style-position:inside;
}

DEMO

Upvotes: 1

Related Questions