如何修复引导程序使用的div，顶部边距和左边距答案

【问题标题】：How to fix div used by bootstrap with margin top and margin left如何修复引导程序使用的div，顶部边距和左边距
【发布时间】：2016-07-28 14:36:44
【问题描述】：

我使用了一个包含段落和 href 的 div。但是我的问题是，当我在页边距顶部使用浏览器并且留有页边距时，它会占用我一个位置，而当我使用另一个浏览器时，它会占用我另一个位置。我的代码：

<div class="clearfix">
  <p style="position:absolute;font-size: 90%;margin-top: 7.2%"><a class="btn btn-info btn-xs" href="#"><i class="fa fa-folder-open-o"></i>&nbsp;List materials</a></p>
  <p style="position:absolute;font-size: 90%;margin-top: 7.2%;margin-left: 18.4%"><a class="btn btn-info btn-xs"  href="#" ><i class="fa fa-plus"></i>&nbsp;Add material</a></p>
  <p style="position:absolute;font-size: 90%;margin-top: 7.2%;margin-left: 29%"><a class="btn btn-success btn-xs"  href="#" ><i class="fa fa-remove"></i>&nbsp;Update material </a></p>
</div>

无论使用什么浏览器，我都可以修复 div 的位置吗？

【问题讨论】：

标签： html twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

因为您已在percentage % 中分配了您的margin-top 和left，这就是它不同的原因。而是将它们分配给px，并将body margin 和padding 设置为0。即使在某一时刻，由于使用percentage %，您的所有内容都会混合在一起，请尝试以下代码。

body{
margin:0;
padding:0;
}

<div class="clearfix">
  <p style="position:absolute;font-size: 90%;margin-top: 34px"><a class="btn btn-info btn-xs" href="#"><i class="fa fa-folder-open-o"></i>&nbsp;List materials</a></p>
  <p style="position:absolute;font-size: 90%;margin-top: 34px;margin-left: 90px"><a class="btn btn-info btn-xs"  href="#" ><i class="fa fa-plus"></i>&nbsp;Add material</a></p>
  <p style="position:absolute;font-size: 90%;margin-top: 34px;margin-left: 180px"><a class="btn btn-success btn-xs"  href="#" ><i class="fa fa-remove"></i>&nbsp;Update material </a></p>
</div>

【讨论】：

当我使用计算机站时，我需要一个位置，而当使用笔记本电脑时，我需要另一个位置。 你对这个问题有一个想法
@johansson 你试试上面的代码，你为什么要使用class clearfix。
是的，我使用了你的代码，它可以工作，但是当我使用笔记本电脑时，我需要另一个位置
@johansson 很难理解你想要什么，最好创建一个你正在做的事情的 jsfiddle 并在详细查询中再次发布
屏幕的问题是因为 div 是相对于屏幕而坐的，所以它将在 1920x1080 桌面上（例如）与 1366x768 桌面上的位置不同笔记本电脑。如果你将它们包裹在 div 中，这是一个基于像素的固定宽度，并且设置为 position: relative;，那么它们将位于同一个位置，前提是屏幕分辨率不小于容器。跨度>

【解决方案2】：

最简单的解决方案之一是使用像素而不是 %。 % 根据导致问题的屏幕调整大小。

https://jsfiddle.net/3z5yqcz8/

<div class="clearfix">
  <p style="position:absolute;font-size: 90%;margin-top: 7.2%"><a class="btn btn-info btn-xs" href="#"><i class="fa fa-folder-open-o"></i>&nbsp;List materials</a></p>
  <p style="position:absolute;font-size: 90%;margin-top: 7.2%;margin-left: 200px;"><a class="btn btn-info btn-xs"  href="#" ><i class="fa fa-plus"></i>&nbsp;Add material</a></p>
  <p style="position:absolute;font-size: 90%;margin-top: 7.2%;margin-left: 400px;"><a class="btn btn-success btn-xs"  href="#" ><i class="fa fa-remove"></i>&nbsp;Update material </a></p>
</div>

【讨论】：