Question

我正在尝试使用图像和基本的CSS样式在HTML中创建一个简单的按钮。当我在浏览器中加载html文件时，它会显示按钮的文本以及一些按钮图像，但是文本外部的任何内容都会被切断。

我希望按钮完全显示（它非常大），根本没有文字。

这是我的HTML代码：

<link rel="stylesheet" type="text/css" href="style.css">
<a href="somepage.html" class="likeAButton">Fake Button</a>

这是我的css文件：

a.likeAButton {
     width: 500px;
     height: 600px;
     background-image: url(./images/buttons/4s_inactive.png);
     font-size: 14px;
     font-family: Tahoma, Geneva, sans-serif;
     font-weight: bold;
     text-align: center;
}
a.likeAButton:hover {
    width: 500px;
    height: 600px;
    background-image: url(./images/buttons/4s_active.png);
    font-size: 14px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    text-align: center;
}
a.likeAButton:active {
    width: 500px;
    height: 600px; 
    background-image: url(./images/buttons/4s_active.png);
    font-size: 14px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    text-align: center;
}

任何帮助都将不胜感激。

Answer 1

默认情况下，锚点是内联的，因此它们没有大小。试试这个：

a.likeAButton {
    display: inline-block;
    ... 
}

a.likeAButton {
  display: inline-block;
  width: 500px;
  height: 600px;
  background-image: url(http://placehold.it/500x600);
  font-size: 14px;
  font-family: Tahoma, Geneva, sans-serif;
  font-weight: bold;
  text-align: center;
}
a.likeAButton:hover {
  background-image: url(http://placehold.it/500x600/0000ff);
}
a.likeAButton:active {
  background-image: url(http://placehold.it/500x600/ff0000);
}

<a href="somepage.html" class="likeAButton"></a>

<强> Fiddle demo

请注意，我从:hover和:active伪类中剥离了大部分样式语句。没有必要重复它们。

HTML按钮图像被切断

1 个答案: