0

我现在被卡住了，试图在我的锚标签周围添加空间。当我添加填充时，它只会使宽度变大，并且背景图像保持不变。

我想要做的是，当我向主锚标记添加填充时，主图像会移动。

jsfiddle：http: //jsfiddle.net/mwJUY/

html:

<ul id="navbar">
    <li><a id="homebutton" href=""><span>Home</span></a>
    </li>
    <li><a href="">Services</a>
    </li>
    <li><a href="">Resources</a>
    </li>
    <li><a href="">News</a>
    </li>
    <li><a href="">Clients</a>
    </li>
    <li><a href="">Association</a>
    </li>
    <li><a href="">Contact Us</a>
    </li>
</ul>
4

3 回答 3

1

尝试使用定位您的背景图像background-position。

例子：

#homebutton {
background-position: center top;
}

第一个值是 x 坐标，第二个值是 y 坐标。
您可以使用 px、em 或百分比。

编辑：

更新的小提琴

于 2013-11-01T06:25:17.277 回答
0

您可以在锚点内添加图像。

<a href="blah">
    <img src="blah"/>
    <span>Home</span>
</a>

http://jsfiddle.net/mwJUY/5/

于 2013-11-01T06:28:48.160 回答
0

尝试给予margin: 20px并尝试

这是小提琴

主要原因是 padding 在控件边界和它的内容之间创建了一个间隙，而 margin 创建了与父容器的距离

当您应用填充时，控件大小保持不变，因此背景实际上完全适合。添加图像标签和来源或使用边距

于 2013-11-01T06:26:28.757 回答