Question

我正在使用CSS制作动画，我有这个问题。

使用margin-left和margin-right属性向左或向右移动屏幕对象的正确方法是什么？因为，当我将margin-left设置为负值时，它不会位于屏幕外。当我将margin-right设置为某个正值时，它也不会位于屏幕外。只有当我将这些属性设置在一起时，才会让对象完全脱离屏幕，例如：

#q_what_is {    /* example of setting the object off screen */
  margin-left: -200px;
  margin-right: 370px; /* I left few pixels visible on purpose but setting it to -400px will put it off screen completely*/
}

我的问题是：

为什么我必须设置两个边距，为什么设置单个边距不起作用？
用于（左侧和右侧）边距的正确值是什么？
这是将对象放在屏幕上以进行动画制作的正确方法吗？
此方法是否与Chrome以外的其他浏览器兼容，或者我刚发现错误？

这是我的代码：

.question {
  display: inline-block;
  float: left;
  text-align: right;
  overflow: hidden;
  width: 400px;
}

.question_image {}

.answer {
  display: inline-block;
  float: left;
  font-size: 1.5em;
  max-width: 600px;
  text-align: left;
}

.decor {
  display: inline-block;
  width: 200px;
}

.decor_image {
  display: inline-block;
  float: left;
  vertical-align: top;
  width: 200px;
}

#q_what_is {
  /* example of setting the object off screen */
  margin-left: -200px;
  margin-right: 370px;
}

<div style="width:100%">
  <div class="question">
    <span id="q_what_is" class="question_image" style="font-size: 20em;display: inline-block;"> &#9824;</span>
  </div>
  <div id="q_what_is_answer" class="answer">
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  </div>
  <div id="qu_what_is_decor_container" class="decor">
    <span id="q_what_is_decor" class="decor_image" style="font-size:20em;display:inline-block">&#9827;</span>
  </div>
</div>

（在这个例子中，为了方便，我用unicode字符替换了图像）

Answer 1

您已在错误的元素上应用了样式。当您在内跨距（即div.question内）上设置边距时，将根据容器设置边距。

您无需设置两个边距。
margin-left和margin-right的正确值取决于html元素的宽度。对于这种情况，translateX等于-391px。
边距是偏离屏幕外元素的正确方法
它与其他浏览器兼容。

更新代码

.question {
  display: inline-block;
  float: left;
  text-align: right;
  overflow: hidden;
  width: 400px;
}

.question_image {}

.answer {
  display: inline-block;
  float: left;
  font-size: 1.5em;
  max-width: 600px;
  text-align: left;
}

.decor {
  display: inline-block;
  width: 200px;
}

.decor_image {
  display: inline-block;
  float: left;
  vertical-align: top;
  width: 200px;
}

#q_what_is {
  /* example of setting the object off screen */
  transform: translateX(-381px);
}

 <div class="outer"style="width:100%">
 <div class="question">
  <span id="q_what_is" class="question_image" style="font-size: 20em;display: inline-block;"> &#9824;</span>
 </div>
 <div id="q_what_is_answer" class="answer">
  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>
<div id="qu_what_is_decor_container" class="decor">
  <span id="q_what_is_decor" class="decor_image" style="font-size:20em;display:inline-block">&#9827;</span>
</div>
</div>

Answer 2

您可以对该元素使用#content{ font-size: 25px; position:relative; top: 25px; } #picture{ width: 285px; position:relative; top: 30px; } html, body { font-family: Arial, Helvetica, sans-serif; } /* Navigatie */ .navigation { position: relative; top: 100px; width: 230px; } .mainmenu, .submenu { list-style: none; padding: 0; margin: 0; } .mainmenu a { display: block; background-color: #CCC; text-decoration: none; padding: 10px; color: #000; } .mainmenu a:hover { background-color: #C5C5C5; } .mainmenu li:hover .submenu { display: block; max-height: 420px; } .submenu a { background-color: #999; text-align: center; } .submenu a:hover { background-color: #666; } .submenu { overflow: hidden; max-height: 0; -webkit-transition: all 0.8s ease-out; }并仅使用position: relative;（或任何值），而不使用边距设置：

left: -500px

.question {
  display: inline-block;
  float: left;
  text-align: right;
  overflow: hidden;
  width: 400px;
}

.question_image {}

.answer {
  display: inline-block;
  float: left;
  font-size: 1.5em;
  max-width: 600px;
  text-align: left;
}

.decor {
  display: inline-block;
  width: 200px;
}

.decor_image {
  display: inline-block;
  float: left;
  vertical-align: top;
  width: 200px;
}

#q_what_is {
  position: relative;
  left: -500px;
}

屏幕边缘有元素定位元素

2 个答案: