html - 为什么 li 标签之间会出现这种差距?请看我的代码

标签 html css

<分区>

请查看此 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

最佳答案

Floating li 元素 left 将消除它们之间的间隙:

#navmenu ul li {
    float: left;
}

希望对你有帮助

关于html - 为什么 li 标签之间会出现这种差距?请看我的代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25988336/

相关文章:

javascript - 检查循环中的条件

jquery - 淡入淡出 'background-image'

html - 实现 Bootstrap 无缝卡片列

html - css li 与 ul 菜单重叠

javascript - 单击展开一个div并缩小另一个div并在再次单击后恢复正常

javascript - 如何使用 javascript 从父项向 iFrame 添加样式表?

javascript - 从底部滑动第一张图片并淡入第二张图片

html - CSS:帮助对齐彼此相邻的 div(展开 - 折叠)框

html - 通过内容在同一个 DIV 中显示图像和文本

html - 如何将 div 元素放置在屏幕的右侧