0

内部テキストと画像をリンクとして使用するタブを作成しようとしています。私が直面している問題は、アンカーの寸法や位置が画像と異なるように見えることです。jsfiddle リンクでわかるように、画像の下部と div の下部の間にスペースがあり、なぜそこにあるのかわかりません。

JSFミドルリンク

そのリンクにアクセスできない場合は、HTML コード:

<div id="SapDataBtn">
    <a href="#">
        <img runat="server" src="http://i.cubeupload.com/Tm2tPF.png" />
    </a>
    <a href="#" id="SapBtnText">
        Data
    </a>
</div>

CSS:

#SapDataBtn {
  background-color: #c7ddf2;
  text-align: center;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding-left: 15px;
  padding-right: 15px;
  width: 90px;
}
#SapDataBtn a:link,
#SapDataBtn a:visited,
#SapDataBtn a:hover,
#SapDataBtn a:active {
  font-size: 15px;
  font-weight: bold;
  color: #19456e;
  text-decoration: none;
}
#SapDataBtn img {
  border-style: none;
}
4

3 に答える 3

1

以下のようにしてみてください...それはあなたを助けます...

#SapDataBtn img {
  border-style: none;
  vertical-align: middle;
}

フィドル: http://jsfiddle.net/XLeGd/1/

于 2013-02-18T14:17:05.950 に答える