问题用2 DIV稍微偏移

我想对齐（水平）2 <div>（第一个是向上相对于第二），但我得到两者之间的轻微偏移。问题用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测试它）？

UPDATE：

陶菲克Injass的解决方案的工作，但我不能得到通过边框宽度的像这样的自动计算，以取代" 2 + 'px' "：

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

不幸的是，这并未没有工作。

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

来源

2016-06-09 youpilat13

你的意思是说，红色框的左边缘似乎1px的更多比蓝色方块框的左侧？ –

似乎由JS添加的值在红色框中额外为1px，因为它的宽度为：351px;因为蓝色有350px。这似乎是这个原因。 – TechYogi

，因为你使用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

来源

2016-06-09 08:02:49

你的解决方案的工作原理，但我不能通过自动计算边界宽度来代替“2 +'px'”：document.getElementById（'buttons-wrapper'）。style.width = gui.width - parseInt（ document.getElementById（'gui'）.style.borderWidth，10）+'px';我怎样才能自动获得div＃gui的边框宽度？谢谢 – youpilat13

@ user37422您可以使用JavaScript动态获取边框宽度，使用此代码 'var box = document.getElementById（'buttons-wrapper'）; var borderWidth = window.getComputedStyle（box，null）.getPropertyValue（“border-left-width”）;' –

<button>元素默认display: inline-block;其趋向于具有在右侧的是（约）4 PX的空间。

尝试使用：

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

哦，使包装适应周围你还需要添加class="clearfix"到#buttons DIV的按钮。

来源

2016-06-09 06:23:35 Darvanen

这个答案是从stsckoverflow社会追求

采取你可以将这个CSS用于内部DIV：

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

当然，你不必设置宽度为50％。任何宽度小于包含div将工作。 margin: 0 auto是什么实际居中。

如果你是针对IE8 +，它可能是最好有这个代替：

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

它会使内部元件中心水平和它的作品没有设置具体的宽度。

来源

2016-06-09 06:40:13

试图为#gui和＃键，包装30％，它会解决这个问题设置宽度。

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

Here is link of fiddle

请注意：，因为它的设置覆盖内嵌的宽度可以设置宽度％按您的要求，也可以删除重要条件！

希望这可以帮助你。

来源

2016-06-09 06:46:16 TechYogi

问题用2 DIV稍微偏移

回答

相关问题