即使我添加了必要的 CSS（向右浮動等），也無法將按鈕移動到頁面右側并將文本移動到頁面中心
<div id="project-heading" style = "margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px" text-align="center">
<span display="inline;" float = "center;" style="color: white; ">Visual Analysis of US Accidents Data </span> <button position = "absolute;" background-color ="black;" color = "white;" float ="right; display="inline-block;" padding-left = "100%;" id="reset" onclick="reset">Reset</button>
</div>
'''
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/j9dRz.png
uj5u.com熱心網友回復：
display、float 等
都是 CSS 變數，應該包含在 HTML 的 style="" 部分中，而不是作為關鍵字引數。我已經演示了在下面的代碼段中插入它們的正確方法。您還可以使用right: 0將元素對齊到其父元素的右側。它通常比浮動更可靠。我right: 10px在這個例子中使用了這個按鈕，所以它的右側有一點呼吸空間。
<h1>Only fixed syntax:</h1>
<div id="project-heading" style = "background: blue;margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px; text-align: center;">
<span style = "display: inline; float : center; color: white;">
Visual Analysis of US Accidents Data
</span>
<button style="position: absolute; color: white; background-color: black; float: right; display: inline-block; padding-left: 100%" id="reset" onclick="reset">
Reset
</button>
</div>
<h1>Fully fixed version</h1>
<div id="project-heading" style = "background: blue;margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px">
<span style = "display: inline; float : center; color: white;">
Visual Analysis of US Accidents Data
</span>
<button style="position: absolute; background-color: black; color: white; float: right; display: inline-block; right: 10px" id="reset" onclick="reset">
Reset
</button>
</div>uj5u.com熱心網友回復：
您的代碼有很多問題，所以讓我們清理它們并分解正在發生的事情：
首先，除非您有特定的理由，否則不要使用行內樣式。使用類或 ID，甚至只是通用選擇器，但將 HTML 和 CSS 分開將使您的生活更輕松（當您尋求幫助時，我們的生活也會更輕松！;)）
您有已打開且從未關閉的標簽，這會導致一些問題。浮動對您沒有任何幫助。如果您想將按鈕放置在頁面的右側，absolute您需要使用right屬性告訴它在右側。您的標題居中，您只是看不到它，因為它是白色背景上的白色。
如果您要行內樣式，則需要在該style=""部分中包含您的樣式資訊，否則，您將面臨問題或完全無效代碼的風險。
如果您需要任何其他幫助或解釋，請告訴我 :)
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: lightgrey;
}
#project-heading {
margin-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
padding-top: 5px;
text-align: center;
}
.title {
display: inline;
float: center;
color: white;
}
.btn {
position: absolute;
right: 10px;
background-color: black;
color: white;
display: inline-block;
}<div id="project-heading">
<span class="title">Visual Analysis of US Accidents Data </span>
<button class="btn" id="reset" onclick="reset">Reset</button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/474062.html
上一篇：高度繼承不適用于絕對位置