Question

请参阅此CodePen：http://codepen.io/anon/pen/KypbC。

HTML

<body>
        <nav>
            <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
            </ul>
        </nav>
    </body>

CSS

body {
    font-family: "Helvetica Neue";
}
nav {
    height: 50px;
    background-color: #EEE;
/*  border: 1px solid #DDD;
*/}
nav ul li {
    display: inline;
    padding: 20px;
    line-height: 50px;
}
.nav-inverse {
    background-color: black;
    color: lightGray;
}

我知道它与line-height属性有关，但不了解它是如何工作的。

编辑：我已阅读line-height的文档，但不了解它。

什么是＆＃34;行框＆＃34;？
什么使内联元素＆＃34;替换＆＃34; vs.＆＃34;未被替换＆＃34;？ ...

Answer 1

你应该使用display:inline-block并始终使用box-sizing:border-box来提供内部边框，或者100%宽度+边框2px（右边+左边），这样它就会超越100％和滚动条将出现

问题是你给了line-height + padding所以身高增加了

Codepen

Answer 2

您遇到的“问题”与父元素和子元素之间的折叠边距有关。

父母和第一个/最后一个孩子

如果没有边框，填充，内联   内容，或间隙，以分隔块的边缘顶部   margin-top的第一个子块，或没有边框，填充，内联   内容，高度，最小高度或最大高度来分隔   在最后一个孩子的边缘底部的块的底部 -   那些利润就会崩溃。倒塌的保证金最终在外面   父节点。

来源：MDN

<ul>元素的默认样式包括margin-top。当您不为其提供边框时，它会与父容器（nav）折叠。

这就是为你设置边框时ul元素“向下移动”的原因。

为什么添加边框会改变导航栏的位置？

2 个答案: