CSS -inheritance

Question

我将警告图像和文本的样式设置为：

​

​

它看起来很好，但问题是我不知道右边的文本会有多长，所以我需要在文本和警告图标之间做一些继承，这样当文本更长时，警告会更多地移动到左侧站点。而不是文本在图像下移动。

我需要的:在警告图像和文本之间进行继承，而不是依赖于文本的长度

我的CSS：

.warningimg{
    background-image: url("images/warning.png");
    background-repeat: no-repeat;
    display: inline-block;
    width: 37px;
    height: 35px;
    margin-top: 56px;
    margin-left: 750px;
    margin-right: 1px;
}                
a .warning{
    color: #d4d4d4;
    height:35px;
    display: inline-block;
    text-align: right;
    float:right;
    margin-top: 30px;
    margin-right: 0px;
    text-decoration:none;
    margin-top: 65px; 
}

我的HTML：

<div class="center">
    <div class="warningimg"></div>
    <a href="#"><span class="warning"><span class="underline">NIGHT CUP 2014</span>- Sledujte přímý přenos</span></a>
</div>

可在以下网站上找到实时预览：http://funedit.com/andurit/try5/

Answer 1

您可以使用下面的命令，而不是在警告文本之前插入带有图像背景的div

.warning:before {  
    content: " ";  
    background: url("images/warning.png");  
    height: 37px;  
    width: 35px;  
}  

以便文本始终显示在您的警告范围之前。

Answer 2

你的代码很难。你不需要一个警告图标的<div>，你必须使用简单的构造。就像这样(附言和这个也解决了你的问题)

HTML

<div class="warning-block"><span class="underline">NIGHT CUP 2014</span>- Sledujte přímý přenos</div>

CSS

.warning-block {
    float: right;
    padding: 0 0 0 50px; /*your distance between the icon and underlined text*/
    font-size:14px;
    line-height: 16px; /*line-height must be equall to the height of the icon*/
    background: url(img/icon.png)  no-repeat;
}