Question

我有以下内容... http://jsfiddle.net/tLUkV/我希望我的超链接可以像display: block;那样传播到行尾，但我希望图像在display: in-line;的同一行上有没有办法实现混合并获得我想要的东西？

编辑：只是为了澄清......

我想要左边的图像和紧随其后的超链接文本，但超链接本身跨越整行

Answer 1

我只是将链接设置为块，并将图像用作链接的背景图像。一些左边的填充，它应该完全按照你想要的那样出现。

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 */
}

修改：将height更改为line-height以使文字中心垂直

Answer 2

如果确实要求链接一直向右扩展，那么以下内容将起作用：

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

演示：http://jsfiddle.net/AyZ22/5/

通常你会用display: inline-block完成类似的事情。

Answer 3

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

的常用方法

这是一个示例 JSFiddle

（图标实际上比您的尺寸大，以便适合），然后您只需为链接指定一个不同的类名即可更改其背景

有超链接表现链接显示：块但同时在同一行上有图像？

3 个答案: