如何将列表的项目符号移动到文本的右侧？(How do I move a list's bullet point to the right side of the text?)

子弹图像必须位于文本的右侧。现在，它默认显示在页面的左侧。我怎么能改变这个？

我有这个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; } }

这是我的HTML：

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

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:

This is my HTML:

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

最满意答案

你没有项目符号的原因是list-style: none;

删除list-style: none; 来自.landingpage ul ，如果你愿意，你可以添加direction: rtl; 使列表显示在屏幕的右侧而不是左侧。

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

JSFiddle演示

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

更多推荐