CSS：div search element right alignement（Bootstrap）

Question

我无法找到正确的代码来将我的div元素对齐到页面右侧。

现在我有了这个：

我想要这个：

这是我的代码：

<h1 class="pb-2 mt-4 mb-2 border-bottom">Producten</h1>

<button type="button" name="button" class="btn btn-warning" *ngIf="!newProduct" (click)="newProductForm()">Nieuwe productvraag</button>
<button [disabled]="loading" type="button" name="button" class="btn btn-default" *ngIf="!newProduct" (click)="reload()"><i class="fas fa-sync-alt"></i>&nbsp;&nbsp;Reload</button>
<form name="searchForm" (submit)="search()" class="form-check-inline">
  <div class="float-right">
    <input type="text" name="title" class="form-control" placeholder="*Zoek product" aria-label="Search"/>
    <button type="submit" style="display:none;">Hidden</button>
  </div>
</form>

2个按钮（黄色和灰色）与表单无关。表单是我页面的搜索功能。我使用bootstrap来造型。

Answer 1

我已解决您的问题，请检查以下代码

<h1 class="pb-2 mt-4 mb-2 border-bottom">Producten</h1>
<div class="clearfix">
<button type="button" name="button" class="btn btn-warning" *ngIf="!newProduct" (click)="newProductForm()">Nieuwe productvraag</button>
<button [disabled]="loading" type="button" name="button" class="btn btn-default" *ngIf="!newProduct" (click)="reload()"><i class="fas fa-sync-alt"></i>&nbsp;&nbsp;Reload</button>
<form name="searchForm" (submit)="search()" class="form-check-inline float-right">
    <input type="text" name="title" class="form-control" placeholder="*Zoek product" aria-label="Search"/>
    <button type="submit" style="display:none;">Hidden</button>
  </div>
</form>
</div>

Answer 2

将类添加到输入标记search-input

然后在你的css文件中

.search-input {
    float: right
}

Answer 3

如果您使用的是bootstrap 4，那么您可以这样做。将您的按钮和表单包装成一个div并给他上课d-flex和ml-auto类以形成标签

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<h1 class="pb-2 mt-4 mb-2 border-bottom">Producten</h1>

<div class="d-flex">
<button type="button" name="button" class="btn btn-warning" *ngIf="!newProduct" (click)="newProductForm()">Nieuwe productvraag</button>
<button [disabled]="loading" type="button" name="button" class="btn btn-default" *ngIf="!newProduct" (click)="reload()"><i class="fas fa-sync-alt"></i>&nbsp;&nbsp;Reload</button>
<form name="searchForm" (submit)="search()" class="form-check-inline ml-auto">
  <div>
    <input type="text" name="title" class="form-control" placeholder="*Zoek product" aria-label="Search"/>
    <button type="submit" style="display:none;">Hidden</button>
  </div>
</form>
<div>

＆＃13;

＆＃13;

＆＃13;