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

因为您已在margin-top中分配了left和percentage %，所以这就是它的不同之处。而是在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>

如何修复bootstrap使用的div，边距为top，边距为left

2 个答案: