Html CSS-继承

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

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

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

我的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>

可在以下网站上找到实时预览：

---

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

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

---

因此，文本将始终显示在警告范围之前。

您的代码非常难。警告图标不需要

，必须使用简单的结构。像这样（附言，这也能解决你的问题）

HTML

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

---

你能让问题标题更具建设性吗？在警告图像和之后的文本之间保持这样的继承性，而不取决于文本不使用“继承”这样的词多长时间，这是CSS中的一个技术术语，被大多数人误解，在这里可能根本不相关。相反，请简单地解释渲染的错误。您必须定位它：PYup:）谢谢。这是提问者要解决的问题，哈哈，别让他那么容易。你大拇指朝上了。男人：P不管怎样，我只是按照自己的方式做的，谢谢你的回答。你让我学到了一些新东西：）@user258459只要问题解决了，新的解决方案就归你所有，没问题

.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;
}