你好，我是 html 和 CSS 的新手，我正在使用這種方式來移動元素.. 這是移動元素的正確方法嗎？有沒有更簡單的方法？因為我將它們移動了 100 次以獲得完美的方式.. 請不要判斷 mt 類命名，它只是為了測驗 xd.. 我真的很難在 gernal 中移動元素，所以我正在做多個示例更了解它。提前致謝！*：在左邊/右邊意味著就像在他們之間哈哈..
HTML：
<footer>
<h1 class="foot">left</h1>
<h1 class="foot f">in left</h1>
<h1 class="foot ff">right</h1>
<h1 class="foot fff">in right</h1>
<h1 class="foot ffff">middle</h1>
</footer>
CSS：
.f{
position: absolute;
left: 250px;
}
.ff{
position: absolute;
right: 0px;
}
.fff{
position: absolute;
right: 250px;
}
.ffff{
position: absolute;
right: 700px;
}
.foot{
display: inline;
color: black;
text-align: center;
}
footer{
height: 100px;
padding: 25px;
background-color: white;
}
uj5u.com熱心網友回復：
我的建議是了解 flexbox。它將允許您以多種不同的方式定位您的元素并使其保持回應。使用像素進行定位的問題在于，如果您要使螢屏更小，它們可能會離開螢屏，或者如果您將螢屏放大，但不會占據全屏。
https://flexboxfroggy.com/是一種非常酷的學習 flex 的方式。
在 x 軸上水平對齊內容的示例。
<footer style="display: flex; justify-content: center">
<h1 class="foot">left</h1>
<h1 class="foot f">in left</h1>
...
</footer>
uj5u.com熱心網友回復：
當使用絕對位置時，我用來避免必須更新代碼數百次以嘗試使元素進入完美位置的一個好技巧是將它設定一次作為猜測然后進入 chromes 開發檢查器。從開發檢查器內部，找到您嘗試定位的元素并查找您應用的 css 樣式。在檢查器中找到樣式后，您可以單擊并拖動該px值，它將實時移動頁面上的元素。
需要注意的一件事position: absolute;是它在回應式布局中表現不佳。所以你的移動布局可能需要調整才能讓事情看起來不錯！
uj5u.com熱心網友回復：
在 CSS 中移動元素有很多方法，但被認為是最佳實踐的主要方法是使用：Grid 或 Flexbox。我建議您觀看一些有關 Flexbox 和 Grid 的教程，它們會對您有很大幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/516325.html
標籤：htmlcss