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：浮动图像右上角的数字值

回答

相关问题