css工具欄失敗

我很失敗，試圖找出如何在css中創建工具欄。「所有」我試圖做的是創建一個4按鈕的22x22按鈕工具欄。css工具欄失敗

我有這樣的PNG： the toolbar 與此代碼：

<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>

其中顯示位圖確定，但選擇/的HREF被偏置於，大致2個按鈕的離開了，我不能工作了如何「推」按鈕或將其拖回。

TIA

來源

2011-08-02 push 22

瀏覽器可能有一個默認填充爲ul。

#nav { padding: 0; }

來源

2011-08-02 11:28:09 jimworm

whooooohoooooo - 輝煌，非常感謝。 –

重置CSS將允許您在所有瀏覽器中使用理智默認值開始項目。 http://meyerweb.com/eric/tools/css/reset/ – jimworm

使用CSS重置。最常見的有：

* { margin: 0; padding: 0; }

來源

2011-08-02 11:30:19

附加由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>

來源

2011-08-02 11:35:23 feeela

謝謝，但下一步是弄清楚如何使用精靈並繪製懸停圖像。 –

css工具欄失敗

回答

相關問題