Question

请参阅此css和html，然后查看图像以了解我所谈论的差距。我可能会因为太小而烦恼，并且修复这个问题不会对网页的可用性产生任何影响，但我现在正在学习，我只是想了解这种行为。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" href="css/resetdefault.css">
    <link rel="stylesheet" href="css/main.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
    <div id="topbar">
        <nav id="navmenu">
            <ul>
                <li>Sample</li>
                <li>Sample</li>
                <li>Sample</li>
                <li>Sample</li>
                <li>Sample</li>
                <li>Sample</li>
            </ul>
        </nav>
        <a href="login.html">Sign Out</a>
    </div>
</body>
</html>

我附加了两个css文件，一个是我的重置文件，另一个是此页面：

重置CSS：

 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
 acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike,
 strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label,
 legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
 embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
 time, mark, audio, video, input, select
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    box-sizing:border-box;
    word-wrap:normal;
    }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
    }
body {
    line-height: 1.2;
    }
ol {
    padding-left: 1.4em;
    list-style: decimal;
    }
ul {
    list-style: square;
    }
table {
    border-collapse: collapse;
    border-spacing: 0;
    }
table, th, td {
    border: 1px solid black;
}
a{
    color:black;
    cursor:pointer;
    text-decoration: none;
    }
a:active{
    color:inherit;
    }
input[type="submit"] {
    float: left;
    padding: 4px 8px;
    border: 1px solid rgb(50,50,50);
    font-size: .8em;
}

主文件（本页）：

    #navmenu ul li{
    display:inline-block;
    padding:15px;
}

#navmenu ul{
    display:inline-block;
}

#topbar a {
    float: right;
    display: inline;
    padding: 5px;
}

#navmenu {
    display:inline-block;
    float: left;
}

#navmenu ul li:hover {
    background-color: rgb(50,50,50);
    color: rgb(255,255,255);
}

现在这是浏览器中导航菜单的图像，注意li元素之间的间隙。我已经更改了显示属性，我已经检查了chrome，如果这是某种保证金，但是当我检查元素时，它并没有真正告诉我差距是什么。

enter image description here

Answer 1

Floating li元素left将消除它们之间的差距：

#navmenu ul li {
    float: left;
}

希望这有帮助

为什么这个差距介于li标签之间？请看我的代码

1 个答案: