html - 向左浮动时 li 元素下的未知边距

标签 html css

我用 css 制作了一个简单的导航栏,但它如何在我的 <li> 的底部显示边距标签。这是图片。当我删除 float 属性时,<li> 下的边距消失。

enter image description here

这是 css。

nav{
    background:#333;
}
nav ul{
    display:inline-block;
}
nav ul li{
    display:inline;
    float:left;
    list-style:none;
}
nav ul li a{
    color:#fff;
    padding:15px;
    display:block;
    text-decoration:none;
    font-weight:600;
    font-size:16px;
}

最佳答案

您应该从 nav ul 中删除 display:inline-block; 并为 使用 display:inline-block; nav ul li 没有float

nav{
    background:#333;
}
nav ul li{
    display:inline-block;
    list-style:none;
}
nav ul li a{
    color:#fff;
    padding:15px;
    display:block;
    text-decoration:none;
    font-weight:600;
    font-size:16px;
}

关于html - 向左浮动时 li 元素下的未知边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23082682/

相关文章:

html - 为什么我的标题和图片之间有大约 1-2 像素的差距?

javascript - 将一个网站嵌入另一个网站

html - 两个链接的 CSS 文件不起作用

css - flex 元素的 `display` 属性的允许值是多少? ( flex 元素的 child 的布局无关紧要)

jquery - 不将 css 属性值带到 jQuery 生成的 div

javascript - Flickity 不渲染轮播中的第二张图片

列表项的 HTML/CSS 中心标题

css - Bootstrap 3 表格未正确对齐

css - 以 IE9 或 IE8 为目标,但不能同时使用 CSS

javascript - 悬停时展开内容