1

リンク付きのナビゲーションメニューがあります。テキストリンクの前にアイコンがあります。このアイコンをテキストリンクの後に配置したいと思います。ウェブサイトはこちらhttp://www.labella.co.il/です。

リンクのCSS：

.sidebar ul.menu li a {background: url("1-default/bullet.png") no-repeat scroll 0 12px transparent;}

アイコン画像はにありurl("1-default/bullet.png")ます。

4

3 に答える 3

4

これがあなたが求めているものを得るために変更されたコードです：

.sidebar ul.menu li a {
    background: url("1-default/bullet.png") no-repeat scroll 100% 12px transparent;
    padding: 10px 22px 10px 0;
}

左のパディングを右に入れ替えて、背景画像を右側に押しています。

100%（他の回答のように）「マジックナンバー」とは対照的に使用したことに注意してください。つまり、幅が変わってもアイコンは一列に並び、メンテナンスは不要です。

于 2012-12-13T00:19:35.533 に答える
2

背景画像の位置を変更し、テキストがそれを覆わないようにパディングを追加します。

.sidebar ul.menu li a {
    background: url("1-default/bullet.png") no-repeat scroll 100% 12px transparent;
}

.sidebar ul.menu li a {
    cursor: pointer;
    text-decoration: none;
    padding: 10px 23px 10px 22px;
    display: block;
    background: #CCC;
}
于 2012-12-13T00:17:52.627 に答える
1

background-position次のように変更できます：

.sidebar ul.menu li a {
  background: url("1-default/bullet.png") no-repeat scroll 202px 12px transparent;
}

次にpadding、アイコン用のスペースを作るように調整します。

.sidebar ul.menu li a {
   cursor: pointer;
   text-decoration: none;
   padding: 10px 22px 10px 0;
   display: block;
   background: #CCC;
}
于 2012-12-13T00:17:49.197 に答える