css - 跨度包装问题中的 href

Question

我有以下代码

<li>
    <span class="image">
        <a href ='xyz'> this is a long link text </a>
    </span>
</li>

跟随 CSS

.image {
    &:before {
    content:(../image/xyz.png); 
}

使用上面的代码，a href 内的文本很长并且被包裹在图像下方。我希望它从它开始的地方环绕。

例如

   IMAGE this is a 
         long link text

目前它的渲染

   IMAGE this is a 
   long link text

我不想改变 html 的结构。我可以包括两个不同的跨度或 div。但是如果没有上面的代码可以做到这一点。

score 1 · Accepted Answer

这应该可以帮助您：

.image::before {
    content: url(../image/xyz.png);
    float: left;
}

您所要做的就是将float: left属性添加到伪元素。
请注意，上面的代码是纯 CSS。我也content稍微改变了属性。

score 1 · Accepted Answer

您可以尝试添加以下 CSS：

.image{
  background: url(image.png) top left no-repeat;
  padding-left: 100px /* image width */
}

score 0 · Accepted Answer

以特定宽度向左浮动图像。文本应浮动到图像的左侧。或者确保将浮动添加到锚标记。如果此代码失败，请在图像下方添加足够大的边距以防止文本换行。

.image img {
    float: left;
    width: 60px;
}

.image a {
    float: left;
    width: 100px;
}

3 回答 3