Question

我无法让导航悬停选项无缝悬停。我的菜单链接之间有1-2像素大小的差距。我查看了css并在Firefox中使用了inspect元素选项，但我似乎无法找到导致此问题的原因。任何有关解决这个问题的帮助都会非常感激，我会提到我是css的初学者，所以有些css可能不是“标准练习”。

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="IM3._0._Default" %>
<link href="StyleSheet1.css" rel="stylesheet" />
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div class="TopContainer">
            <div class="Header">

            </div>
            <div class="BumperBar1">

            </div>
            <div class="NavBar">
                <ul id="navlist">
                <li><asp:LinkButton ID="LinkButton1" runat="server" CssClass="LinkButtons">Link 1</asp:LinkButton></li>
                <li><asp:LinkButton ID="LinkButton2" runat="server" CssClass="LinkButtons">Link 2</asp:LinkButton></li>
                <li><asp:LinkButton ID="LinkButton3" runat="server" CssClass="LinkButtons">Link 3</asp:LinkButton></li>
                <li><asp:LinkButton ID="LinkButton4" runat="server" CssClass="LinkButtons">Link 4</asp:LinkButton></li>
                <li><asp:LinkButton ID="LinkButton5" runat="server" CssClass="LinkButtons">Link 5</asp:LinkButton></li>
                <li><asp:LinkButton ID="LinkButton6" runat="server" CssClass="LinkButtons">Link 6</asp:LinkButton></li>
                <li><asp:LinkButton ID="LinkButton7" runat="server" CssClass="LinkButtons">Link 7</asp:LinkButton></li>
            </ul>
        </div>
    </div>
    <div class="MainContent">

    </div>
</form>
</body>
</html>

body {
    background-color: #D9D9D9;
    padding: 0px;
    margin: 0px;
}

.TopContainer{
    background-color: white;
    width: 100%;
    border-bottom: 1px solid;
    border-bottom-color: Black;
    height: 100px;
    display: table;
}

.Header{
    background-color: White;
    width: 1000px;
    margin: auto;
    height: 67px;
    display: block;
}

.BumperBar1{
    height: 3px;
    width: 100%;
    background-color: #999;
    display: block;
}

.NavBar{
    background-color: White;
    width: 1000px;
    margin: auto;
    height: 30px;
    display: block;
}

#navlist{
    margin: 0;
    padding-left: 10px;
}

#navlist li{
    display: inline-block;
    height: 30px;
    margin: 0;
    padding: 0;
}

#navlist li:hover{
    background-color: #57A1D3;
}

#navlist li a{
    height: 30px;
}

.MainContent{
    background-color: White;
    width: 1000px;
    margin: auto;
    min-height: 800px;
}

#form1{
    margin: 0;
}

.LinkButtons{
    padding-right: 13px;
    padding-left: 13px;
    line-height: 30px;
    margin: 0;
    color: #57A1D3;
    text-decoration: none;
}

.linkbuttons:hover{
    color: white;
}

Answer 1

内联元素对空白区域很敏感，因此您需要通过以下任一方式将其删除：

删除代码中li元素之间的空白，</li><li>
将列表项元素浮动
使用HTML注释占据列表元素之间的空格，即</li><li>
将<ul>上的字体大小设置为零，然后将其重置为<li>上所需的任何内容

Answer 2

尝试将float：left添加到#navList li

#navlist li{
    display: inline-block;
    height: 30px;
    margin: 0;
    padding: 0;
    float: left;
}

在这里看到它的工作： http://jsfiddle.net/zmawbhvq/

悬停时的CSS菜单空白

2 个答案: