仅使用负边距向左移动元素,但元素也移动到顶部

时间:2018-03-27 14:55:19

标签: html css css3

与班级#34;否定"应该只向左移动。但是当我设置负边距时,元素也会移动到顶部。 为什么会这样,我该如何解决?

没有负边距的代码:



.negative {  }

div{
  background-color:red;
}

.negative{
 background-color:blue;
}

<div><p class="negative">...</p><p>...</p></div>
&#13;
&#13;
&#13;

带有负边距的代码:

&#13;
&#13;
.negative { margin: 0 -30px; }

div{
  background-color:red;
}

.negative{
 background-color:blue;
}
&#13;
<div><p class="negative">...</p><p>...</p></div>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

您需要添加margin-left属性。 display:block不是必需的 - 它是p元素的默认css属性,但如果你要切换到span或其他东西,你需要确认该元素是一个块或类似受margin-left影响的东西。

.negative { margin-left: -5px; }

div{
  background-color:red;
}

.negative{
 background-color:blue;
}

p {
  display: block;
}
<div>
<p class="negative">...</p>
<p>...</p>
</div>

答案 1 :(得分:0)

有人提到确保你不要将你的上/下边距设置为0.你可以专门选择左边距的方法是“margin-left:-30px;”。

答案 2 :(得分:0)

你可以尝试给你的元素留下margin-left,如下例所示:

HTML:

<p class="negative"></p>

CSS:

.negative{margin-left:30px;}