将文字移到右侧CSS

我正面临使用CSS的问题。我花了分配时间来完成目标工作，但对我来说太难了。现在我要问大家（网站管理员/开发人员）解决我的问题。将文字移到右侧CSS

sidebar urgentfiles.com

请查看这张照片，并告诉我，我怎么可以移动文本编号子弹的第二行（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}

这里是网站的原文链接：Urgentfiles.com

来源

2014-10-03 Muhammad Nouman Khalid

你需要让子弹是li内容外：

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

来源

2014-10-03 19:11:01

I'don't得到你的答案，请解释一下 – 2014-10-03 20:42:51

你试试码？创建子弹时，它们具有实际黑色圆圈子弹的默认“内部”或“外部”定位。这是指它相对于'li'元素的位置。如果它在里面，那就像子弹文本中的一个字母。如果它在外面，那么左对齐的文本开始在黑圈的右侧。 – 2014-10-03 21:09:41

这里您是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; 
}

来源

2014-10-03 19:44:31

你做错了，因为我已经失去了自动编号：D – 2014-10-03 20:42:23

嗯，这是如何解决与文本定位问题，你可以添加自己的计数器，而不是我的柜台:)我没有做错，你想为特定问题的解决方案，并且问题已经消失:) – 2014-10-03 20:49:14

是的，你是正确的问题是随着我的柜台:) – 2014-10-03 20:53:12

，如果你要保持这种标记

设置

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

但我想改变HTML标记是更好

来源

2016-02-18 08:47:37

将文字移到右侧CSS

回答

相关问题