我如何將按鈕向右對齊？
我試著text-align: right;和align-content: right;
我也希望按鈕有 display: flex;
CSS：
#hideShow {
display: flex;
text-align: right;
align-content: right;
}
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">
<title>Document</title>
</head>
<body>
<div class="flex">
<form action="../index.html" id="BtTS">
<input type="submit" value="<--- Back to Title Screen" />
</form>
<div align="right">
<button class="flex" id="hideShow" onclick="hideBtTS()">Hide</button>
</div>
</div>
<div id="dividers">
<hr><br><br>
</div>
</body>
</html>
編輯：在示例中作業但不在主代碼中，為背景關系添加了更多代碼
uj5u.com熱心網友回復：
您可以使用 margin-left: auto，但您必須將其顯示為一個塊，如下所示 -
#hideShow {
display: block;
margin-left: auto;
}
如果你想要它在中心，那么還要添加 margin-right: auto 如下 -
#hideShow {
display: block;
margin-left: auto;
margin-right: auto;
}
uj5u.com熱心網友回復：
您正在對按鈕內的文本進行更改。你必須把“text-align: right”放在容器而不是按鈕上
#right {
text-align: right;
}uj5u.com熱心網友回復：
你應該在你的父 div 上有彈性。此外，您可以嘗試使用
{ display: flex; justify-content: flex-end; }
justify-content 將使您的按鈕與父 div 的末尾（視窗右側）對齊。
uj5u.com熱心網友回復：
在這里，我假設您的按鈕容器的寬度為 100%。
CSS：
.btn-container {
display:flex;
justify-content:flex-end
}
//#hideShow {
// display: flex;
// text-align: right;
// align-content: right;
//}
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">
<title>Document</title>
</head>
<body>
<div class="flex">
<form action="../index.html" id="BtTS">
<input type="submit" value="<--- Back to Title Screen" />
</form>
<div class="btn-container" align="right">
<button class="flex" id="hideShow" onclick="hideBtTS()">Hide</button>
</div>
</div>
<div id="dividers">
<hr><br><br>
</div>
</body>
</html>
在這里檢查結果
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/358472.html