Question

以下情况：
http://files.dqxtech.net/leftmargin/
http://jsfiddle.net/xeFN3/

<div class="container">
  <div class="element-left">
  </div>
  <div class="element-right">
  </div>
</div>

与

.container {
  width:120px;
}
.element-left {
  width:120px;
  margin-left:12%:
  margin-right:auto;
}
.element-right {
  width:120px;
  margin-right:12%:
  margin-left:auto;
}

问题：
.element-left应该与.element-right对称，但事实并非如此。对于.element-left，“自动”保证金评估为负值，“12％”保证金评估为12％。对于.element-right，“自动”保证金评估为零，“12％”保证金评估为负值。

知道为什么会发生这种情况，以及如何解决这个问题？ text-align确实有所不同。

Answer 1

margin - 值auto始终评估为零或正像素数。

对于.element-left，“自动”保证金评估为负值

不，margin-right评估为零;元素只是溢出它的父元素，它可以由overflow属性控制。默认情况下，元素会溢出到右侧和底部。通过将文字方向从ltr设置为rtl（从右到左），可以撤消此行为。

我想，你最好使用内部DIV的相对位置。另一种可能的解决方案是use fixed negative value instead of auto (e.g. -12%)。

margin-left：auto不能为负数，但margin-right：auto可以

1 个答案: