css工具栏失败

Question

我正在努力尝试找出如何在css中创建工具栏。 “我想要做的就是创建一个由4个按钮组成的22x22按钮工具栏。

我有这个png：和这段代码：

<style>
#nav {background: url(content/images/crtoolbar.png) no-repeat;height: 22px;width: 88px;}
#nav span {display: none;}
#nav li {list-style-type: none;float: left;width: 22px;}
#nav a {height: 22px;display: block;}
</style>

<ul id="nav">
    <li id="b1"><a href="#"><span>b1</span></a></li>
    <li id="b2"><a href="#"><span>b2</span></a></li>
    <li id="b3"><a href="#"><span>b3</span></a></li>
    <li id="b4"><a href="#"><span>b4</span></a></li>
</ul>

显示位图确定，但是选择/ hrefs大致偏向左侧2个按钮，我无法理解如何“按下”按钮或“拖动”hrefs。

TIA

Answer 1

浏览器可能有ul的默认填充。

#nav { padding: 0; }

Answer 2

除了jimworm和Rikudo的答案之外：

如果你真的只有颜色作为按钮，你可以只使用CSS：

<style>
/* insert css reset here */

nav li {
    list-style-type: none;
    display: inline; }
nav a {
    display: inline-block;
    width: 22px; height: 22px;
    overflow: hidden;
    text-indent: 25px; }
#b1 { background: #0ff; }
#b2 { background: #000; }
#b3 { background: #00f; }
#b4 { background: #f00; }
</style>

<nav>
    <ul>
        <li id="b1"><a href="#">b1</a></li>
        <li id="b2"><a href="#">b2</a></li>
        <li id="b3"><a href="#">b3</a></li>
        <li id="b4"><a href="#">b4</a></li>
    </ul>
</nav>

Answer 3

使用CSS重置。最常见的是：

* { margin: 0; padding: 0; }