Html 是否有超链接显示:块,但在同一行上也有图像?

Html 是否有超链接显示:块,但在同一行上也有图像?,html,css,Html,Css,我有以下几点。。。我希望我的超链接像display:block一样一直延伸到行的末尾但我希望图像在同一行上,如显示:串联有没有一种方法可以实现混合并得到我想要的 编辑:只是为了澄清 我希望图像在左边,超链接文本在后面,但是超链接本身跨越了整行如果确实需要链接一直延伸到右边,那么下面的方法就可以了: img { height: 20px; left: 0; position: absolute; width: 20px; } a { display: blo

我有以下几点。。。我希望我的超链接像
display:block一样一直延伸到行的末尾但我希望图像在同一行上,如
显示:串联有没有一种方法可以实现混合并得到我想要的

编辑:只是为了澄清


我希望图像在左边,超链接文本在后面,但是超链接本身跨越了整行

如果确实需要链接一直延伸到右边,那么下面的方法就可以了:

img
{
    height: 20px;
    left: 0;
    position: absolute;
    width: 20px;
}
a
{
    display: block;
    line-height: 20px;
    margin-left: 20px;
}
演示


通常情况下,您可以使用
display:inline block
完成类似的操作。

我只是将链接设置为块,并将图像用作链接的背景图像。一些左填充,它应该完全按照您希望的那样显示

a:link{
    display: block;
    background: url(http://www.w3schools.com/images/compatible_chrome.gif) no-repeat left center;
    padding-left: 30px;        /* whatever you need */
    line-height: 30px;         /* whatever you need */
}

编辑:
高度
更改为
行高
使文本中心垂直

使用图像作为背景将是“图标化”链接的常用方式

这是一个示例


(图标实际上比你的尺寸要大,所以需要调整以适应)然后你只需给链接一个不同的类名来改变它们的背景

这样你就想让图像一直在左边,让超链接一直在右边,并且在同一条线上?而不是一直在右边。我希望图像在左边,超链接文本在后面,但超链接本身跨越了整行