css - 带背景的锚 css - 链接文本被压缩成新行

Question

我在具有特定类的锚标记上使用以下 CSS。工作正常，除了长链接文本被强制换行。我想这与宽度有关...

a.interactive {
background:url(../images/icons/icon_interactive.png) left center no-repeat;
padding-left:30px;
height:25px;
width:25px;
display:inline-block;    
text-decoration: none;
vertical-align:text-center;
}

Answer 1

您需要使用 100% 宽度或设计允许的最大宽度来最大化宽度。

Answer 2

a.interactive {
    /*...*/
    white-space: nowrap;
}

Answer 3

尝试这个

a.interactive {
background:url(../images/icons/icon_interactive.png) left center no-repeat;
height:100%;
width:100%;
display:inline-block;    
text-decoration: none;
vertical-align:text-center;
}