javascript - 将两个按钮置于父 div 的子 div 中

Question

我正在使用 dat.gui.js 为 Three.js 设置一个参数菜单。我想把这个菜单放在主窗口的右上角。此外，我想在此菜单底部添加 2 个按钮，它们必须水平居中并相对于父 div。

这是 an example in JS Fiddle .

如您所见，在 HTML 中，子级和父级 div 的结构如下:

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

使用 #gui 的 CSS:

gui.domElement.id = 'gui';

对应于:

#global-ui {position: relative;}
#gui {position: absolute; top: 0; right: 0;}
#buttons {position: absolute; top: 200px;}
 

#global-ui div代表#gui div和#buttons div的父div。

使用这个 css，我得到了下图:

我想得到这个:

正如您在第一张图片中看到的，存在两个问题:首先，即使使用 CSS "#gui {position: absolute; top: 0; ，DAT.GUI 也没有严格位于右侧和顶部。右:0；}”。右边好像有空白。

第二个问题，两个按钮相对于 DAT.GUI 没有居中，我尝试使用“margin: 0 auto;”或“text-align: center;”但没有成功。我想将它相对于 #gui div 容器以自动方式居中。

我该如何解决这两个问题？

Answer 1

至于控件右边的间距，你的#gui元素的右边距为 15px，因此您可以通过添加 margin-right:0; 来更正此问题#gui 的 CSS 规则:

#gui {position: absolute; top: 0; right: 0; margin-right:0;}

至于对齐要居中的元素，我在这里分解了:

理论

为了居中 div , 使用 CSS 的方法是让子元素使用 margin-right和 margin-left都设置为 auto , 并且父元素需要足够宽以填充您希望容器在其中居中的区域。

解决方案

容器的宽度(在本例中为 #buttons )仅与其内部按钮一样宽，因此如果您简单地执行此操作，则没有足够的宽度让按钮居中:

#button {
  margin-left: auto;
  margin-right: auto;
}

因此，宽度 #buttons必须增加容器，使其达到您需要的宽度，在本例中，与 #gui 一样宽元素，但这样做仍然不能让按钮居中，因为它们有两个，所以你需要一个包装器元素，它在内部为按钮居中创建空间。这在 DOM 中看起来像这样:

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

然后 #buttons-wrapper需要设置为#gui的宽度(按钮应该居中的空间的目标宽度)和#buttons需要设置为等于子容器总和的宽度 #startButtonId和 #resetButtonId , 然后 margin-right和 margin-left终于可以应用于#buttons它将按预期工作。

要动态设置宽度，您必须使用 JavaScript 并测量所需容器的宽度:

document.getElementById('buttons-wrapper').style.width = gui.width + 'px';
target_width = 5;  // a couple pixels extra
target_width = target_width + document.getElementById('startButtonId').offsetWidth;
target_width = target_width + document.getElementById('resetButtonId').offsetWidth;
document.getElementById('buttons').style.width = target_width + 'px';

我已将针对您的特定案例的完整解决方案放入此 fiddle 中:http://jsfiddle.net/bnbst5sc/4/

通用解决方案

一般情况下，它在您的解决方案的上下文之外:

#outer-wrapper {
  position: absolute;
  top: 100px;
  left: 150px;
  width: 300px;
  padding: 10px 0;
  background-color: #ff0000;
}
#inner-wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 175px;
  padding: 10px 0;
  background-color: #00ff00;
}
button {
  display: inline-block;
  float: left;
}
#btn1 {
  background-color: #f0f000;
  width: 100px;
}
#btn2 {
  background-color: #00f0f0;
  width: 75px;
}

<div id="outer-wrapper">
  <!-- #outer-wrapper, has an arbitrary width -->
  <div id="inner-wrapper">
    <!-- #inner-wrapper, as wide as the sum of the widths of #btn1 and #btn2 and has margin-left and margin-right set to auto-->
    <button id="btn1">Button 1</button>
    <button id="btn2">Button 2</button>
  </div>
</div>