我想移动任何选定的块（通过点击等）在html文档。
如果我设置position: absolute属性，元素将从流中删除，布局将发生变化。我在这里看到只有一个使用position: relative的选项，但在这种情况下，很难将其移动到左，中，右。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link href="solutions.css" rel="stylesheet">
<title>test</title>
</head>
</style>
<body>
<div class="container-fluid bg-primary p-5 hero-header">
<div class="row py-5">
<div class="col-8 text-center">
<h1 class="display-1 text-white py-5" id="te">Some text</h1>
<button class="h4 text-white btn btn-warning">Home</button>
<i class="far fa-circle text-white px-2"></i>
<button class="h4 text-white btn btn-success">Example</button>
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>我想将“主页”按钮更改为右对齐
let leftOffset = Math.ceil(window.innerWidth - document.querySelector("body > div > div > div > button.h4.text-white.btn.btn-warning").getBoundingClientRect().width - document.querySelector("body > div > div > div > button.h4.text-white.btn.btn-warning").offsetLeft)
document.querySelector("body > div > div > div > button.h4.text-white.btn.btn-warning").style.position = "relative"
document.querySelector("body > div > div > div > button.h4.text-white.btn.btn-warning").style.left = leftOffset + "px"但按钮会关闭屏幕
所以我不明白为什么它不起作用。如果我想居中或向左对齐，似乎会有更多的代码来做。如果我能使用位置绝对值（左：0，50，100）并且不改变流程就好了
1条答案
按热度按时间k75qkfdt1#
如果你想将蓝色按钮移动到黄色按钮旁边，最好的方法是使用flex boxdisplay。这样你就可以将按钮移动到div中，并将div显示设置为flex，这样你就可以管理元素在该div中的位置。