我希望按钮被放置在与其他元素相同的高度。但我不知道该怎么做。我迷失在街区里…
btn打印
如何将按钮放置在与下拉框相同的高度?
下面是我的代码的想法
.wrapper-component {
width: 95%;
margin: 0 auto;
}<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="mt-5 home-content wrapper-component ">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-auto">
<!-- Type -->
<label for="type" class="col-form-label">TYPE</label>
</div>
<select class="form-select" style="max-width: 240px">
<option selected disabled value="">Choice an item</option>
<!-- ALL -->
<option [value]="'ALL'">ALL</option>
<!-- IN -->
<option [value]="'IN'">IN</option>
<!-- OUT -->
<option [value]="'OUT'">OUT</option>
</select>
<div class="col-auto">
<label for="status" class="col-form-label">STATUS</label>
</div>
<select class="form-select" style="max-width: 240px">
<option selected disabled value="">Choice a status</option>
<!-- ALL -->
<option [value]="''">ALL</option>
<!-- ENCODE -->
<option [value]="'1'">ENCODE</option>
<!-- DELETE -->
<option [value]="'8'">DELETE</option>
<!-- DONE -->
<option [value]="'9'">DONE</option>
</select>
</div>
<div class="float-end">
<div class="col-md-12">
<!-- Print -->
<button class="btn btn-secondary ml-2" (click)="printPage()">Print</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>只需添加另一个带有按钮的<div class="col-auto">。
见下面的代码片段。
.wrapper-component {
width: 95%;
margin: 0 auto;
}<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="mt-5 home-content wrapper-component ">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-auto">
<!-- Type -->
<label for="type" class="col-form-label">TYPE</label>
</div>
<select class="form-select" style="max-width: 240px">
<option selected disabled value="">Choice an item</option>
<!-- ALL -->
<option [value]="'ALL'">ALL</option>
<!-- IN -->
<option [value]="'IN'">IN</option>
<!-- OUT -->
<option [value]="'OUT'">OUT</option>
</select>
<div class="col-auto">
<label for="status" class="col-form-label">STATUS</label>
</div>
<select class="form-select" style="max-width: 240px">
<option selected disabled value="">Choice a status</option>
<!-- ALL -->
<option [value]="''">ALL</option>
<!-- ENCODE -->
<option [value]="'1'">ENCODE</option>
<!-- DELETE -->
<option [value]="'8'">DELETE</option>
<!-- DONE -->
<option [value]="'9'">DONE</option>
</select>
<div class="col-auto ms-auto">
<button class="btn btn-secondary ml-2" (click)="printPage()">Print</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>