html - 如何在容器高度的上下文中正确调整按钮

Question

几天来我一直在为这个问题苦苦挣扎，我已经尝试更改我的 CSS 文档中的所有可能的属性，但它们似乎都不起作用。

网站:http://www.mohrdevelopment.com

问题出在导航栏上。

1. 问题:我想删除的每个按钮之间都有间距/间隙

2. 问题:当鼠标悬停在导航栏上时，所有按钮(主页按钮除外)都会扩展到超出导航栏的背景。导航栏高度为40px。

这是我为栏编写的 HTML 代码:

<div class="wrap">

        <ul class="navigation">
            <li class="current"><a href="index.html"><em class="home"/><b>Home</b></a></li>
            <li><a href="second.html"><em class="photos"/><b>Photos</b></a></li>
            <li><a href="projects.html"><em class="projects"/><b>Projects</b></a></li>
            <li><a href="about.html"><em class="about"/><b>About</b></a></li>
            <li><a href="contact.html"><em class="contact"/><b>Contact</b></a></li>
        </ul>

这是我的 CSS 代码:

body {
        font-family:sans-serif;
        background: url(images/background3.png);
    }

    .navigation {
        background:#1841c8 url(Navigation/Navigation/nav_background.png);
        height:40px;
        margin-bottom:0px;
        display:block;
        min-width:625px;
    }

    .navigation li{
        display:inline-block;
        line-height: 40px;
            }

    .navigation li a{
        color:#FFFFFF;
        padding: 11px 5px 15px;
    }

    .navigation li a em{
        height:32px;
        display:inline-block;
        padding: 0 5px 6px 50px;
        font-weight:bold;
        vertical-align: middle;
        background-position: 0 50%;
    }

    .navigation li a:hover{
        color:#00CCFF;
        background: url(Navigation/Navigation/nav_hover.png);
        text-decoration:none;
        padding: 11px 5px 10px;
    }

    .navigation .current a {
        color:#FFFFFF;
        background:url(Navigation/Navigation/nav_hover.png);
        padding-bottom:11px;
    }


    /*Navigation bar icons*/
    .navigation li a em.home {
        background-image: url(Navigation/Icon_images/home.png);
        background-repeat: no-repeat;

    }

    .navigation li a em.photos{
        background-image: url(Navigation/Icon_images/Photo.png);
        background-repeat: no-repeat;
    }


    .navigation li a em.projects{
        background-image: url(Navigation/Icon_images/projects.png);
        background-repeat: no-repeat;
    }


    .navigation li a em.about{
        background-image: url(Navigation/Icon_images/about.png);
        background-repeat: no-repeat;
    }

    .navigation li a em.contact{
        background-image: url(Navigation/Icon_images/Contact.png);
        background-repeat: no-repeat;
    }



    .wrap {
          margin:auto;
          width:80%;
          background:yellow;
        }

希望有人能帮我解决这个问题，我已经花了好几个小时来排除故障/寻找解决方案。

Answer 1

您的问题来自 li 元素之间的空白。几天前我已经回答了同一个问题的问题。看看 -> Inline-Block without margins?