0

试图在 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>
4

2 回答 2

3

该margin属性不影响inline元素，因此它不起作用。

边距属性指定框的边距区域的宽度。'margin' 速记属性设置所有四个边的边距，而其他边距属性只设置它们各自的边。这些属性适用于所有元素，但垂直边距不会对未替换的内联元素产生任何影响。http://www.w3.org/TR/CSS21/box.html#margin-properties

另请参阅此答案，了解为什么无法在inline元素上设置尺寸。

要解决此问题，您可以更改li为display:inline-block. （示例） - 它有效。

或者，您也可以浮动li元素，具有相同的预期效果。（例子）

于 2013-11-12T18:37:52.677 回答
0

在#nav你有一个错字：

大众：100%；

于 2013-11-12T18:40:06.003 回答