尝试在 div 中移动一些导航栏链接,但它们没有响应。任何人都可以为此提供任何帮助吗? margin-top 似乎什么也没做。 CSS 新手。
CSS
#nav {
height: 70px;
vw: 100%;
background-color: hsla(0, 0%, 83%, .7);
margin-left: -10px;
margin-top: -16px;
margin-right: -10px;
border-bottom: 1px black solid;
}
li {
list-style-type: none;
display: inline;
font-family: Helvetica, sans-serif;
font-size: 20px;
padding-right: 20px;
color: hsl(0, 0%, 50%);
margin-top: 10px;
}
li:hover {
color: white;
}
HTML
<header>
<div id="nav">
<ul>
<li>About</li>
</ul>
</div>
<h1>Hi. This is my playground.</h1>
</header>
<div id="me">
<img src="dp.jpg">
</div>
最佳答案
margin
属性不影响 inline
元素,因此它不起作用。
Margin properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements. http://www.w3.org/TR/CSS21/box.html#margin-properties
另见 this answer关于为什么不能在 inline
元素上设置维度。
要解决这个问题,您可以将 li
更改为 display:inline-block
。 (example) - 它有效。
或者,您也可以 float li
元素,具有相同的预期效果。 (example)
关于css - 为什么 margin 属性不影响行内元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19937180/