CSS - 移動文本而不移動塊

我想要的地方很少的東西，事情看起來很酷，但我需要移動一個簡短的文本里面的「佈雷」。爲了使它看起來像： enter image description here CSS - 移動文本而不移動塊

但ATM它看起來像： enter image description here

我的CSS：

#news #right ul li{ 
    list-style-position: inside; /* Bodka v novom riadku vo vnutry */ 
    list-style-type: none;   /* bez bodky */ 
    background-image: url("images/black_bar.png"); 
    background-repeat: repeat-x; 
    color: #898989; 
    height:45px; 
    width: 569px; 
    line-height: 45px; 
    border 1px; 
    border-color: #898989; 
    position: relative; 
    right: 40px; 
} 
#news #right ul li:hover{ 
    list-style-position: inside; /* Bodka v novom riadku vo vnutry */ 
    list-style-type: none;   /* bez bodky */ 
    background-image: url("images/blue_bar.png"); 
    background-repeat: repeat-x; 
    color: #FFFFFF; 
    height:45px; 
    width: 569px; 
    line-height: 45px; 
    border 1px; 
    border-color: #898989; 
    position: relative; 
    right: 40px; 
} 
#news #right ul li a:visited{ 
    color: #898989; 
} 
#news #right ul li a:active{ 
    color: #898989; 
} 
#news #right ul li a:link{ 
    color: #898989; 
} 
#news #right ul{ 
    padding 0px auto; 
    margin: 0px auto; 
} 
.newsheading{ 
    background-image: url("images/cs_icon.png"); 
    background-repeat: no-repeat; 
    margin-left: 20px; 
    padding-left: 30px; 
    margin-top: 10px; 
    height: 22px; 
    line-height: 22px; 
    display: inline-block; 
}  

#news #right ul li:hover .newsheading{ 
    color: #FFFFFF;   
} 

#news #right ul li .blue-arrow{ 
    background-image: url("images/blue_arrow.png"); 
    background-repeat: no-repeat; 
    width: 31px; 
    height: 46px; 
    position: absolute; 
    right: 568px; 
    display: none;  
} 
#news #right ul li:hover .blue-arrow{ 
    display: inline-block; 
} 

#news #right ul li .balloon{ 
    width: 32px; 
    height: 27px; 
    background-image: url("images/white_buble.png"); 
    margin-left: 250px; 
    display: none; 
} 
#news #right ul li:hover .balloon{ 
    display: inline-block; 
    vertical-align: middle; 
    color: #1d5f97; 
} 
#news #right ul li .blueballoon{ 
    width: 32px; 
    height: 27px; 
    background-image: url("images/blue_buble.png"); 
    display: inline-block; 
    margin-left: 250px; 
    vertical-align: middle; 
    text-align: center; 
    color: #FFFFFF; 
} 

#news #right ul li:hover .blueballoon{ 
    display: none; 
    vertical-align: middle; 
}

我的HTML看起來像：

<span id="right"> 
    <ul> 
    <li><span class="blue-arrow"></span><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span><span class="blueballoon">10</span><span class="balloon">10</span></li> 
    <li><span class="blue-arrow"></span><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span><span class="blueballoon">10</span><span class="balloon">10</span></li> 
    <li><span class="blue-arrow"></span><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span><span class="blueballoon">10</span><span class="balloon">10</span></li> 
    <li><span class="blue-arrow"></span><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span><span class="blueballoon">10</span><span class="balloon">10</span></li> 
    <li><span class="blue-arrow"></span><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span><span class="blueballoon">10</span><span class="balloon">10</span></li> 
    </ul> 
    </span>

在bubles文本搬出去，我需要改變它，在這裏有人誰可以幫助我呢？此外，我有改變文字顏色問題時懸停了，即使我在懸停在#FFFFFF設置：newsheading

實時預覽可以找到： http://funedit.com/andurit/try2/

感謝您閱讀這篇文章:)

來源

2014-04-07 user3009924

只是爲了警告你 - 使用氣球作爲圖像可能是錯誤的。如果數字太長，例如2333435怎麼辦？ –

它的評論數量，它不應該有更多然後99 :)，有沒有其他方式如何做到這一點，而不使用CCS3或JS？ – user3009924

有沒有必要避免使用CSS3或JS，但是是沒有CSS3的解決方案，使用精靈。谷歌「推拉門css」。 –

#news #right ul li .blueballoon { 
    line-height: 24px; 
}

來源

2014-04-07 16:38:15 Nick

Ohoo那麼簡單？你是正確的人！懸停時，你能幫我在文字上設置白色嗎？ – user3009924

CSS - 移動文本而不移動塊

回答

相關問題