跨度包装问题中的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。但是，如果没有上述代码，可以这样做。

Answer 1

这可以帮到你：

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

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

Answer 2

您可以尝试添加以下CSS：

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

Answer 3

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

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

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