如何将按钮放置在与右侧标题相同的高度？答案

【问题标题】：How to place a button at the same height as a title to the right?如何将按钮放置在与右侧标题相同的高度？
【发布时间】：2022-02-14 05:47:19
【问题描述】：

我想把我的按钮放在右上角与标题相同的高度。

这是一个例子：

enter image description here

我现在的结果

enter image description here

我认为我的 div 有问题？按钮不想放在右上角。

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="home-content container">

    <h1 class="text-start ps-3 pt-5 pb-3">Signalétique de SOLVAY BE (Euronext Brussels)</h1>
    <button type="button" (click)="goBack()" class="btn btn-primary mb-2 mr-5 ">Retour</button>
    <hr class="ms-2 mt-1 mb-5" style="width: 97%">
  </div>
</body>
</html>

【问题讨论】：

标签： css bootstrap-4 bootstrap-5

【解决方案1】：

您可以使用行和列在引导程序中保持内容对齐。行有 12 列，所以这里我使用 10 列作为标题，2 列作为按钮，并将按钮右对齐。

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="home-content container">
  <div class="row">
    <div class="col-10 my-2">
        <h2 class="text-start">Signalétique de SOLVAY BE (Euronext Brussels)</h2>
    </div>
    <div class="col-2 my-2 text-right">
        <button type="button" (click)="goBack()" class="btn btn-primary">Retour</button>
    </div>
    <hr class="ms-2 mt-1 mb-5" style="width: 97%">
</div>

</div>
</body>
</html>

【讨论】：

【解决方案2】：

您可以使用position:absolute 或float:right 使其位于右上角：

button{
position: absolute;
right:20px;
top:90px;
}

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="home-content container">

    <h1 class="text-start ps-3 pt-5 pb-3">Signalétique de SOLVAY BE (Euronext Brussels)</h1>
    <button type="button" (click)="goBack()" class="btn btn-primary mb-2 mr-5 ">Retour</button>
    <hr class="ms-2 mt-1 mb-5" style="width: 97%">
  </div>
</body>
</html>

或使用float:right:

button{
float: right
}

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="home-content container">

    <h1 class="text-start ps-3 pt-5 pb-3">Signalétique de SOLVAY BE (Euronext Brussels)</h1>
    <button type="button" (click)="goBack()" class="btn btn-primary mb-2 mr-5 ">Retour</button>
    <hr class="ms-2 mt-1 mb-5" style="width: 97%">
  </div>
</body>
</html>

【讨论】：