Question

尝试在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>

Answer 1

margin属性不会影响inline元素，因此无效。

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

另请参阅this answer，了解为什么无法在inline元素上设置维度。

要解决此问题，您可以将li更改为display:inline-block。 (example) - 它有效。

或者，您也可以浮动li元素，具有相同的预期效果。 (example)

Answer 2

在 #nav 中，您有一个拼写错误：

vw：100％;

为什么margin属性不影响内联元素？

2 个答案: