如何修复引导程序使用的div，页边距在顶部，页边边距在左侧

Question

我使用了一个包含段落和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的位置吗

Answer 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>  

Answer 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>