代码之家 › 专栏 › 技术社区 › Sumchans

角度HTML-尝试对齐一行中的按钮和输入

css3 html5 angular

0

Sumchans · 技术社区 · 8 年前

我有一个按钮集,需要保持在行的右端,我有一个输入字段,应该在行的左端。正在尝试使用CSS网格fr单元。它有时会工作,但在低分辨率的屏幕上,有些按钮根本看不见。

HTML

<div class=“filterButtonsDiv”>
<div style=“margin-left:15px”>
<mat表单字段>
<input style=“border:none”matinput placeholder=“filter”>
</mat表单域>
</DIV>
<DIV style=“float:right”>
<button class=“filterbuttons”>
<B>清除</B>
</button>
<button class=“filterbuttons”*ngfor=“filtercrew的let按钮”>
<b>button.text</b>
</button>
</DIV>
</DIV>
CSS

.filterbuttonsdiv{
显示:网格;
电网间隙:2px;
网格模板列:2fr 5fr;
网格模板行:22px;
}
在下面的图片中,这组按钮应该在最右边。
.

HTML


 <div class="filterButtonsDiv">
        <div style="margin-left:15px">
            <mat-form-field>
                <input style="border:none" matInput placeholder="Filter">
            </mat-form-field>
        </div>
        <div style="float:right">
            <button class="filterButtons">
                <b>Clear</b>
            </button>
            <button class="filterButtons" *ngFor="let button of filterCrew">
                <b>{{ button.text }}</b>
            </button>
        </div>
    </div>


CSS

.filterButtonsDiv {
  display:grid;
  grid-gap: 2px;
  grid-template-columns: 2fr 5fr;
  grid-template-rows: 22px;
}


在下面的图片中,这组按钮应该在最右边。

1 回复 | 直到 8 年前

1

Navdeep Singh 8 年前

对于低分辨率,请更改用户界面以选择正确的过滤选项(如汉堡包菜单或其他)

对于当前的用户界面问题,请检查下面的代码

.wrapper {
  background-color: skyblue;
}
.filterButtonsDiv {
  display:grid;
  grid-gap: 2px;
  grid-template-columns: 2fr 5fr;
  grid-template-rows: 22px;
}
.filterButtons-wrapper {
  text-align: right;
}

<div class="wrapper">
<div class="filterButtonsDiv">
        <div>
            <mat-form-field>
                <input style="border:none" matInput placeholder="Filter">
            </mat-form-field>
        </div>
        <div class="filterButtons-wrapper">
            <button class="filterButtons">
                <b>Clear</b>
            </button>
            <button class="filterButtons" *ngFor="let button of filterCrew">
                <b>{{ button.text }}</b>
            </button>
        </div>
    </div>  
</div>