如何将按钮向右对齐？答案

【问题标题】：How do I align a button to the right?如何将按钮向右对齐？
【发布时间】：2021-11-17 13:05:37
【问题描述】：

如何将按钮向右对齐？

我试过text-align: right; 和align-content: right;

我也希望按钮有display: flex;

#hideShow {
  display: flex;
  text-align: right;
  align-content: right;
}

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<button class="flex" id="hideShow" onclick="hideBtTS()">Hide</button>

【问题讨论】：

这能回答你的问题吗？ Place a button right aligned
试试浮动：对；
@LeoRamadani float 不是一个好的解决方案
@Roy 我认为 HTML5 不支持该功能

标签： html css

【解决方案1】：

你应该在你的父 div 上有 flex。此外，您可以尝试使用 { display: flex; justify-content: flex-end; }

justify-content 会将您的按钮与父 div 的末尾（窗口右侧）对齐。

【讨论】：

【解决方案2】：

你可以使用margin-left:auto，但是你必须将它显示为一个块，如下所示-

#hideShow {
display: block;
margin-left: auto;
}

如果你想要它在中心然后也添加 margin-right: auto 如下 -

#hideShow {
display: block;
margin-left: auto;
margin-right: auto;
}

【讨论】：

【解决方案3】：

您正在对按钮内的文本进行更改。您必须将“text-align：right”放入容器而不是按钮

#right {
  text-align: right;
}

【讨论】：

对我不起作用...你能看看我的代码吗？ pastebin.com/ka1cRxht
我明白了.. 只需添加“justify-content: space-between”。看看这个jsfiddle.net/cpm2v9ts
非常感谢，但我找到了另一种方法！ :)

【解决方案4】：

这里我假设您的按钮容器是 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>

check the result here

【讨论】：

嗯，在我的主代码中不起作用，你能看一下吗？ HTML：pastebin.com/4HmVuZJL CSS：pastebin.com/zR6C4z1u
只需像这样将 width:100% 添加到 btn-container 类 jsfiddle.net/bh1e6yvt/2
不过这个是更优雅的解决方案：jsfiddle.net/bh1e6yvt/4

【解决方案5】：

用途：

.btn-container {
   justify-content: flex-end;
   position: relative;
   bottom: 38px;
}

根据需要调整bottom: ;。

这对我有用。

【讨论】：

【解决方案6】：

试试这个

.flex{
 display: flex;
 justify-content: space-between!important;
}

【讨论】：