1

ボタンのテキストの横にチェックマークを付けたいのですが、Background：leftcenter;を実行すると それは動作しますが、それにパディングなどを追加したいのですが、JSFiddleで提供されているコードでそれを行う方法はありますか？チェックマークを中央に配置し、少し間隔を空けたいと思います。

.Button {
    padding:10px;
    border:1px solid #000;
    width:auto;
    color:#CCC
}

.Button:hover {
    color:#FFF;
    cursor:pointer;
}

.Check{
    background:url('http://67.184.73.19/Munet/Assets/Pictures/OffTick.png') no-repeat;
}

.Check:hover {
    background:url('http://67.184.73.19/Munet/Assets/Pictures/Tick.png') no-repeat;
}

HTML：

<div class="Button Check" style="background-color:rgb(69,72,77);">Test</div>
4

2 に答える 2

1

これは、チェックマークが付いた状態で更新されたフィドルのコードです。

.Button {
  padding:10px 10px 10px 20px;
  border:1px solid #000;
  width:auto;
  color:#CCC
}

.Button:hover {
  color:#FFF;
  cursor:pointer;
}

.Check{
  background:url('http://67.184.73.19/Munet/Assets/Pictures/OffTick.png') no-repeat;
  background-position: 5px 15px;
  OR: background-position: 5px center;
}

.Check:hover {
  background:url('http://67.184.73.19/Munet/Assets/Pictures/Tick.png') no-repeat;
  background-position: 5px 15px;
  OR: background-position: 5px center;
}

アップデート：

また、GordonsBeardの回答に従って、これが機能した理由を確認してください：http ://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position&preval=10px%20200px

于 2013-03-01T02:27:29.947 に答える
0

タグを使用できますbackground-poisition。

background-position: <spacefromleft> <spacefromtop>;

または、同じバックグラウンド宣言内で宣言することもできます。

https://developer.mozilla.org/en-US/docs/CSS/background-position

.Check{
    background:url('OffTick.png') no-repeat 10px center;
}

.Check:hover {
    background:url('Tick.png') no-repeat 10px center;
}

テキストを背景と一致させたい場合は、必ず正しいパディングを指定してください.Button（つまり、残りの3つの側面よりも左側に大きなパディングを配置します）。

于 2013-03-01T02:25:12.430 に答える