2 div的问题略有转移

Question

我想（水平地）对齐2 <div>（第一个相对于第二个），但我两者之间略有不同。

代码（http://jsfiddle.net/8wfu3w26/2/）：

#global-ui {
  position: relative;
}
#gui {
  position: absolute;
  top: 20px;
  right: 0;
  margin: 20px;
  padding: 0;
  overflow: hidden;
  border: 2px solid blue;
}
#buttons-wrapper {
  position: absolute;
  top: 200px;
  right: 0;
  margin: 20px;
  padding: 0;
  border: 2px solid red;
}
#buttons {
  margin-left: auto;
  margin-right: auto;
  border: 2px solid white;
}

<div id="global-ui">
  <div id="gui"></div>
  <div id="buttons-wrapper">
    <div id="buttons">
      <button type="button" id="startButtonId" class="btn btn-primary" tabindex="13">Start</button>
      <button type="button" id="resetButtonId" class="btn btn-default" tabindex="14">Reset</button>
    </div>
  </div>
</div>

我在three.js窗口的右上角得到了以下菜单结果：

如您所见，蓝框左边框与红框左边框之间有一点水平空间。它们并不是完全一致的。

在右边界，两者似乎都是对齐的。

我不知道这个问题可能来自哪里，也许来自浏览器（我已经用Firefox测试过了）？

更新：

Tawfiq Injass的解决方案有效但我无法通过自动计算边框宽度来替换" 2 + 'px' "，如下所示：

document.getElementById('buttons-wrapper').style.width = gui.width - parseInt(document.getElementById('gui').style.borderWidth,10) + 'px';

不幸的是，这不起作用。

如何自动获取div＃gui的边框宽度？感谢

Answer 1

你好，你得到这个效果，因为你使用JavaScript来计算和设置红框的宽度

在这一行

document.getElementById('buttons-wrapper').style.width = gui.width + 'px';

你需要补偿边框宽度，因为你的边框是2px，这条线需要

document.getElementById('buttons-wrapper').style.width = gui.width-2 + 'px';

并使用此代码使用JavaScript动态获取边框宽度

var box = document.getElementById('buttons-wrapper');
var borderWidth = parseInt(window.getComputedStyle(box,null).getPropertyValue("border-left-width").replace("px",""));

检查这个plunker https://plnkr.co/edit/PKjEKBEC0lyjWUoSmHQ1?p=preview

Answer 2

<button>元素默认为display: inline-block;，它往往在右侧有大约4个像素的空间。

尝试使用：

button{
  display: block;
  float: left;
  ...
}

哦，为了让包装器适合按钮，您还需要将class="clearfix"添加到#buttons div。

Answer 3

此答案取自stsckoverflow社区任务

您可以将此CSS应用于内部div：

#inner {
    width: 50%;
    margin: 0 auto; 
}

当然，您不必将宽度设置为50％。任何宽度小于包含div都可以。 margin: 0 auto是实际居中的原因。

如果你的目标是IE8 +，那么改为使用它可能会更好：

#inner {
    display: table;
    margin: 0 auto;
}

它将使内部元素水平居中，并且无需设置特定宽度即可工作。

Answer 4

尝试设置#gui和＃buttons-wrapper的宽度30％它将解决问题。

#gui, #buttons-wrapper{width:30% !important;}

Here is link of fiddle

请注意：您可以根据需要设置宽度％，也可以删除！important条件，因为它设置为覆盖内联宽度。

希望这会对你有所帮助。