html - 如何使用 margin top 和 margin left 修复 bootstrap 使用的 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>