2014-10-03 94 views
0

我正面臨使用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

回答

0

你需要讓子彈是li內容外:

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

I'don't得到你的答案,請解釋一下 – 2014-10-03 20:42:51

+1

你試試碼?創建子彈時,它們具有實際黑色圓圈子彈的默認「內部」或「外部」定位。這是指它相對於'li'元素的位置。如果它在裏面,那就像子彈文本中的一個字母。如果它在外面,那麼左對齊的文本開始在黑圈的右側。 – 2014-10-03 21:09:41

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

你做錯了,因爲我已經失去了自動編號:D – 2014-10-03 20:42:23

+0

嗯,這是如何解決與文本定位問題,你可以添加自己的計數器,而不是我的櫃檯:)我沒有做錯,你想爲特定問題的解決方案,並且問題已經消失:) – 2014-10-03 20:49:14

+0

是的,你是正確的問題是隨着我的櫃檯:) – 2014-10-03 20:53:12

0

,如果你要保持這種標記

設置

.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標記是更好