Html 将文本移动到右侧CSS

Html 将文本移动到右侧CSS,html,css,sidebar,Html,Css,Sidebar,我在使用CSS时遇到了一个问题。我花了分配给我的时间来完成目标工作,但这对我来说太难了。现在我要请你们所有人(网站管理员/开发者)解决我的问题 请查看此图片,并告诉我如何移动编号为(3、5、6、8)的项目符号的第二行文本-我希望第二行文本从第一行开始的同一水平位置开始 以下是此侧边栏的CSS: .plugins ul{padding-left:0;counter-reset:plugincount;} .plugins ul li{border-bottom:1px dashed #ddd;

我在使用CSS时遇到了一个问题。我花了分配给我的时间来完成目标工作,但这对我来说太难了。现在我要请你们所有人(网站管理员/开发者)解决我的问题

请查看此图片,并告诉我如何移动编号为(3、5、6、8)的项目符号的第二行文本-我希望第二行文本从第一行开始的同一水平位置开始

以下是此侧边栏的CSS:

.plugins ul{padding-left:0;counter-reset:plugincount;}

.plugins ul li{border-bottom:1px dashed #ddd;line-height:20px}

.plugins ul li:before{content:counter(plugincount);counter-increment:plugincount;margin-left:-10px;margin-right:1px;background:#8FC93E;border-radius:25px;border:1px solid #000;color:#fff;font:bold 16px georgia;padding:.3em .6em}

..plugins ul li{border-bottom:1px dashed #ddd}

.plugins ul li a{margin-left:10px;}

.plugins ul li a:hover{text-decoration:none}

.plugins ul li:hover,.plugins ul li:hover{border-bottom:1px dashed #696969}

这是站点的原始链接:

您需要将项目符号置于
li
内容之外:

ul li { list-style-position: outside; margin-left: 1em; }
给你


如果您应该维护此标记

设置


但我认为更改html标记更好

你做错了,因为我丢失了自动编号:这是解决文本定位问题的方法,你可以添加自己的计数器而不是我的计数器:)我没有做错,你想要一个特定问题的解决方案,但问题已经消失:)是的,你是对的,我的计数器也消失了:)让我知道更改是否有效,如果你不知道自己在做什么,以后不要复制粘贴解决方案,尤其是在一个实时站点:)你没有更改计数器,它仍然显示我的计数器。将我的计数器的所有实例更改为plugincount。查看更新后的答案:)我没有得到你的答案,请解释一下,你试过代码了吗?创建项目符号时,它们具有实际黑圈项目符号的默认
内部
外部
位置。这是指它相对于
li
元素的位置。如果它在里面,那么它就像子弹文本中的一个字母。如果它在外部,则左对齐的文本从黑圈的右侧开始。
body {
  counter-reset: my-counter; /* REmove this */
}

ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: 300px;
   counter-reset:plugincount; /* Add this */
}
ul li:before {
    background: #8fc93e;
    border: 1px solid #000;
    border-radius: 100%;
    color: #ffffff;
    content:counter(plugincount); /* change from my-counter to plugincount*/
    counter-increment:plugincount; /* change from my-counter to plugincount*/        
    float: left;
    font-family: Georgia;
    font-size: 16px;
    font-weight: 700;
    list-style-type: none;
    margin-right: 15px;
    padding: 0.3em 0.6em;
    position: relative;
}
ul li{        
    padding: 0.7em 0;
}
ul li a{
    text-decoration: none;
    color: #000000;
}
.plugins ul li {position: relative; padding-left:40px /* set padding bigger then circle */;
.plugins ul li::before {position: absolute; top: 0; left: 0; margin:0 /*clear margin*/