文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将按钮放置在与右边标题相同的高度？

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

Stack Overflow用户

提问于 2022-02-13 21:30:51

回答 2查看 171关注 0票数 0

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

下面是一个示例：

在这里输入图像描述

我现在的成绩

在这里输入图像描述

我想我的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

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-02-13 21:41:29

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

票数 0

Stack Overflow用户

发布于 2022-02-13 21:36:00

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71105031

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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