Question

以下是指向我网页的链接：

如果你看，有两个盒子。一个人说＆＃34;入门＆＃34;一个人说＆＃34;免费试用＆＃34;。这是我用来生成它们的HTML：

    <div style="margin-top:-100px">
        <span style="margin-right:525px;font-size:18px;font-weight:bold;color:white;">Make money for a referral</span>
        <span style="margin-left:-15px;font-weight:bold;font-size:18px;color:white;">Hire the best candidate</span>
        <h5>
           <img src="images/bluuhorn.png" class="fa-image" style="margin-bottom:15px;padding:3px 0 0 0;width:140px;height:137px;">&nbsp;&nbsp;
           <span style="font-size:20px;color:white;margin-right:205px;margin-left:205px">Explainer Video</span>&nbsp;&nbsp;
           <img src="images/Company.png" class="fa-image" style="margin-bottom:15px;padding:3px 0 0 0;width:140px;height:137px">
        </h5>
    </div>                              
</div>
</div>
</div>
<div>
    <button class="btn btn-secondary" style="background-color:#25AAE1;width:245px;height:42px;margin-left:150px"><span style="color:white;font-size:18px">GET STARTED</span></button>
    <button class="btn btn-secondary" style="background-color:#25AAE1;width:245px;height:42px;margin-left:470px"><span style="color:white;font-size:18px">TRY IT FREE</span></button>
</div>

显然，这并不适用于每台显示器。我想象它是由于边缘。我如何解决这个问题，以便它集中在每个监视器上？

A。）我希望它直接位于栏杆下方。 B.）我预计问题是我将margin-left设置为某些像素，并且不能在每种类型的显示器上正确布局。

我希望图像直接位于以按钮为中心的上方。不幸的是，我使用边距来设置按钮，这会导致问题。

Answer 1

当宽度低于~1100像素时，网站存在许多问题。您在边距中使用了太多的绝对宽度，以使这些组件适用于所有窗口大小。

该网站已使用Bootstrap框架构建。因此，请阅读如何设置列和行，并将顶部的元素放入列中以使这些内容正常流动。

监视器上的边距创建不同的效果

1 个答案: