将文本移动到右侧CSS

时间：2022-11-20 11:15:02

I'm facing a problem using CSS. I've expended the time allotted to complete the target job, but it's too hard for me. Now I'm going ask all of you (webmasters/developers) to solve my problem.

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

将文本移动到右侧CSS

Please review this picture and tell me how I can move the second line of text for the bullets numbered (3, 5, 6, 8) - I want the second line of text to start at the same horizontal position at which the first one starts.

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

Here is CSS of this sidebar:

这是侧边栏的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}

Here is the original link of site: Urgentfiles.com

这是网站的原始链接:Urgentfiles.com

3 个解决方案

#1

1  

Here you are http://jsfiddle.net/jhkb5jrb/1/

在这里你是http://jsfiddle.net/jhkb5jrb/1/

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;
}

#2

0  

You need to make the bullets be outside the li content:

你需要让子弹在li内容之外:

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

#3

0  

if you should maintain this markup

如果你应该保持这个标记

set

.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*/

but I think change html markup is better

但我认为改变html标记更好

#1

1  

Here you are http://jsfiddle.net/jhkb5jrb/1/

在这里你是http://jsfiddle.net/jhkb5jrb/1/

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;
}

#2

0  

You need to make the bullets be outside the li content:

你需要让子弹在li内容之外:

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

#3

0  

if you should maintain this markup

如果你应该保持这个标记

set

.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*/

but I think change html markup is better

但我认为改变html标记更好

标签：

相关文章