CSS：浮動圖像右上角的數字值

我想浮動圖像右上角的數字。我希望此編號在右上角的圖像的一小部分上具有背景色和覆蓋圖。CSS：浮動圖像右上角的數字值

我曾嘗試：

<li class=topoulimg><span id=bell><img src=img-img/bell.png alt=alerts></span><span class=bellnumbers>10</span></li>

CSS

.bellnumbers{ 
float:right; 
font-size:12px; 
background-color:red; 
width:10px; 
height:10px; 
color:#fff; 
}

，但它無法正常工作。

http://jsfiddle.net/yv5q4gvm/

來源

2015-09-24 Rick Joe

[不帶引號HTML屬性？]（http://stackoverflow.com/q/9837063/5297207）它是傷害我的眼睛！查看頂部答案中的類示例，瞭解這可能會如何產生問題。 Alt也可能有這個問題......（我希望這只是懶惰的例子，但如果沒有，我建議打破這種習慣）。 –

當你有一個回聲「」;例如，你不需要引用引號。我傾向於不再需要報價，所以我通常不會使用它們！哈哈，但非常感謝你，我會開始在我的項目中再次使用引號！ –

你可以試試這個...

<span class="bell"> 
     <img src=https://cdn4.iconfinder.com/data/icons/simplicio/64x64/message.png alt=alerts> 
    <span class="bellnumbers">10</span> 
</span> 

.bell { 
    display: inline-block; 
    position: relative; 
    background-color: #eee; 
    width: 48px; 
    height: 42px; 
    text-align: center; 
    padding-top: 6px; 
} 
.bell img { 
    width: 24px; 
    height: 24px; 
    padding-top: 10px; 
} 
.bellnumbers { 
    font-size:12px; 
    background-color:red; 
    width:16px; 
    line-height: 16px; 
    text-align: center; 
    color:#fff; 
    z-index: 2; 
    border-radius: 3px; 
    position: absolute; 
    left: 28px; 
}

JSFiddle

來源

2015-09-24 17:31:08 Aakash

這解決了我的問題！我不知道爲什麼，但在我的真實項目中，絕對位置不適用於此，數字位於屏幕的另一側......但您的解決方案效果不錯！謝謝。 –

使用position:absolute爲您的徽章，而不是float:right（調整您的需求）。

CSS

.bell { 
    display: inline-block; 
    position: relative; 
    width:64px; 
} 

.bellnumbers { 
    position: absolute; 
    font-size:12px; 
    background-color:red; 
    width:14px; 
    height:14px; 
    color:#fff; 
    top: -4px; 
    right: -4px; 
}

浮子CSS屬性指定的元素應該從正常流動採取並沿着左側或右側其容器，其中文本和內聯元素放置將環繞它。

DEMO HERE

來源

2015-09-24 17:07:28

謝謝！我會嘗試 –

奇怪的是，在我的本地主機裏面的號碼總是在紅色方塊的外面（在底部）。 –

試試這個..也許這將解決你的目的（嘗試引導徽章，可以是一個幫助）

<li> 
    <span class=bell> 
     <img src="https://cdn4.iconfinder.com/data/icons/simplicio/64x64/message.png"> 
      <span class=bellnumbers>10</span> 
    </span> 
</li> 


<style> 
.bellnumbers{ 
vertical-align: top; 
font-size:17px; 
letter-spacing: 3px;  
background-color:#F06861; 
width:27px; 
height:22px; 
color:#fff; 
border-radius: 3px; 
padding-top: 3px;  
text-align: center; 
position: absolute; 
margin-left: -1%; 
margin-top: -5px;  
} 
.bell{ 
    width:64px; 
    margin-top: 5%; 

} 
</style>

來源

2015-09-24 17:33:23

正如其他人已經表明的那樣，li上的絕對/相對定位和'inline-block'對此非常理想。然而，我已經將代碼修剪了很多。演示在這裏：https://jsfiddle.net/r09d314v/

<style type="text/css"> 

    li { 
    display: inline-block; 
    list-style-type: none; 
    position: relative; 
    } 

    span { 
    position: absolute; 
    top: -8px; 
    right: -10px; 
    background: red; 
    color: white; 
    padding: 2px; 
    } 

</style> 


<li> 
    <img src="https://cdn4.iconfinder.com/data/icons/simplicio/64x64/message.png"> 
    <span class="number">11</span> 
</li>

來源

2015-09-24 17:42:07

CSS：浮動圖像右上角的數字值

回答

相關問題