Jquery 如何使用自己的图像设置按钮的样式?如何消除<;之间的图像空白;李>;及<;李>;密码

Jquery 如何使用自己的图像设置按钮的样式?如何消除<;之间的图像空白;李>;及<;李>;密码,jquery,html,image,button,navigation,Jquery,Html,Image,Button,Navigation,我想制作一个三行导航菜单 这是我的小提琴 我想样式我的按钮,原始图像没有灰色背景,我想使用我自己的图像 此外,为什么我的图像之间有空白?如何删除空白?这样我的图像可以很好地连接 我的编码 <script src="http://code.jquery.com/jquery-1.7.1.js"></script> <button class="menu" ><img src="http://i.stack.imgur.com/EkwMp.png" widt

我想制作一个三行导航菜单

这是我的小提琴

我想样式我的按钮,原始图像没有灰色背景,我想使用我自己的图像

此外,为什么我的图像之间有空白?如何删除空白?这样我的图像可以很好地连接

我的编码

<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<button class="menu" ><img src="http://i.stack.imgur.com/EkwMp.png" width="40" height="40" /></button>
<div id="navbar" style="display:none;">
    <nav>
        <ul>
            <li>
             <div id="wrapper">
             <img src="http://www.weatherclipart.net/free_weather_clipart/umbrellas_page_border_graphic_0515-0908-2220-2617_SMU.jpg" width="35" height="52" class="hover" />
            <p class="text"><a href="#">Home</a></p>
            </div>
            </li>
            <li>
            <div id="wrapper">
             <img src="http://www.weatherclipart.net/free_weather_clipart/umbrellas_page_border_graphic_0515-0908-2220-2617_SMU.jpg" width="35" height="52" class="hover" />
            <p class="text"><a href="#">About</a></p>
            </div>
            </li>
            <li>
            <div id="wrapper">
             <img src="http://www.weatherclipart.net/free_weather_clipart/umbrellas_page_border_graphic_0515-0908-2220-2617_SMU.jpg" width="35" height="52" class="hover" />
            <p class="text"><a href="#">Contact</a></p>
            </div>
            </li>
        </ul>
    </nav>
</div>
Javascript

$('.menu').click(function() {
    $('#navbar').toggle('slow');
});
如果可以,请给我一个演示,这样我会更容易理解,谢谢

这正是我想要的,谢谢你的帮助

您是否尝试在li元素上使用
列表样式图像
?像这样:

ul li {
    list-style-image: url('path/of/image/file');
}

(很抱歉,如果我的答案不是您等待的答案,我不确定是否理解该问题)。

您需要使用锚定,而不是下面的按钮

<a class="menu" ><img src="http://i.stack.imgur.com/EkwMp.png" width="40" height="40" /></a>
更新

将此添加到css中

#navbar div {
    height: 53px;
}

不行,你看见小提琴了吗?当你点击按钮时,图像会出现,但是图像之间有空格,我想去掉空格,这样图像可以像直线一样平滑连接。不是主链接和图像之间的空格,是主图像和关于图像之间的空格,有什么问题要解决吗?图像应该是这样的,因为空间是由li元素中的div高度决定的,所以你需要调整该高度。现在,你可以使用我更新的答案
#wrapper .text {
    position:relative;
    bottom: 42px;
    left: 34px;
    visibility:hidden;
    }
#navbar div {
    height: 53px;
}