0

アンカータグがあり、状況に応じてアイコンでアンカータグの背景を設定したい。

だから私は次のクラスを持っています:-

/* Folder Icons CSS */
.FolderOpen {
  width: 150px;
  height: 50px;
  background-image: url(../images/icon_folder_24x24.png);
  background-repeat:no-repeat;
  overflow: hidden;
}

.FolderClose {
  width: 150px;
  height: 50px;
  background-image: url(../images/icon_folder_24x24_closed.png);
  background-repeat:no-repeat;
  overflow: hidden;
}

画像サイズは24x24です

私は次のようにアンカータグを持っています:-

<a class="showFilesForFolder FolderClose" data-folderid="@folder.FolderId" data-personid="@Model.PersonId" style="cursor:pointer; text-decoration:none;"> <span>@folder.FolderName</span></a><br />

画像が高さと幅いっぱいに表示されていません。

テキストが画像に重ならず、画像がきれいに表示されるように助けていただけませんか?

前もって感謝します

4

6 に答える 6

2

アンカータグ内でイメージタグを使用する必要があります。次に、css を設定して、テキストと画像の正しい位置を取得できます。

于 2013-08-09T09:57:04.383 に答える
0

パディングおよび/またはテキストインデントを使用し、ニーズに合わせてパディングを調整します。

padding: 5px 5px 5px 10px;

パディングは時計回りに上から左に行くため、この例では上、右、下のパディングは 5 ピクセルに設定され、左のパディングは 10 に設定されます。

于 2013-08-09T09:41:22.667 に答える
0

はっきりと見えるjsfiddleはありますか？

画像の周りにテキストを浮かせてみませんか?

于 2013-08-09T09:39:50.490 に答える
0

パディング (この場合は左) と背景画像の位置を調整して、アンカー テキストが重ならないようにスペースを確保できます。

HTML

<a class="showFilesForFolder FolderOpen"><span>Folder open</span></a>
<br />
<br />
<a class="showFilesForFolder FolderClose"><span>Folder close</span></a>

CSS

a {
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    // The trick is here:
    padding-left: 30px;
}

/* Folder Icons CSS */
 .FolderOpen {
    width: 150px;
    height: 50px;
    // Position your background image
    background: url("http://www.thenetadvantage.co.uk/wp-content/themes/netadvantage/images/icon-linkedin.png") no-repeat top left;

}
.FolderClose {
    width: 150px;
    height: 50px;
    // Position your background image
    background: url("http://computer-forensics.sans.org/images/design/custom/icons/twitter-icon.png") no-repeat top left;
}

作業例: http://jsfiddle.net/qg7Ns/2/

于 2013-08-09T09:52:44.097 に答える