时间戳

首页 > 解决方案 > 设置网页上的按钮位置

html - 设置网页上的按钮位置

问题描述

我在搞乱一些 chrome 扩展，并且在设置按钮位置时遇到了一些问题。我看过其他解决方案，他们说要使用 .display="inline-block"; 但这似乎对我不起作用。我最初希望按钮位于中间。

var f = document.getElementById("main");
var myButton = document.createElement('button');
myButton.setAttribute('id','btn');
myButton.innerHTML="Start";
myButton.style.padding="0";
myButton.style.background="#60C22D";
myButton.style.fontSize="10px";
myButton.style.width="40px";
myButton.style.display="inline-block";
myButton.style.textAlign="center";

这可能不是设置参数的最佳方式，但正如您从图像中看到的那样，正在调用这些值。有没有办法可以调出按钮的特定位置？例如，我希望它位于“Google 搜索”按钮的正下方，这可能吗？

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

标签： html

解决方案

我们在 css 中有一个“位置”属性，它可以有不同的值：

  1. 绝对
  2. 相对的
  3. 静止的
  4. 固定的
  5. 粘性和...

它们有不同的用途，您可以在以下位置阅读它们：

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/position
  2. https://www.w3schools.com/cssref/pr_class_position.asp

在这种情况下，您需要绝对或固定。

注意：也关心 z-index

此外，如果你想居中一个元素，你可以这样做：

<!--for example we center a div inside its parent-->
   <div id="container">
   <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)"></div>
</div>

为初学者定位一个大主题

推荐阅读