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

Question

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

这是一个例子：

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>

Answer 1

您可以使用 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>

Answer 2

您可以使用行和列使内容在 bootstrap 中保持对齐。行有 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>

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

How to place a button at the same height as a title to the right?

css

bootstrap-4

bootstrap-5