如何在我的选择旁边对齐单选按钮?

时间:2018-10-23 17:31:26

标签: html css

我需要将选择的位置对齐中心,并在选择的旁边显示单选按钮。

我确实尝试过:

<div class="row">
   <div class="col-3">
      <div class="select">
         <select [(ngModel)]="controlaRadios" name="primeiroFiltroName" class="select-text">
         <option hidden selected class="dropdown-item">Primeiro filtro</option>
         <option value="1" class="dropdown-item">Todos</option>
         <option value="2" class="dropdown-item">Tipo de anúncio</option>
         </select>
         <span class="select-highlight"></span>
         <span class="select-bar"></span>
      </div>
   </div>
   <div *ngIf="controlaRadios == 2" class="col-3">
      <div class="custom-control custom-radio custom-control-inline">
         <input type="radio" class="custom-control-input" id="defaultInline1" name="inlineDefaultRadiosExample">
         <label class="custom-control-label" for="defaultInline1">Premium</label>
      </div>
      <div class="custom-control custom-radio custom-control-inline">
         <input type="radio" class="custom-control-input" id="defaultInline2" name="inlineDefaultRadiosExample">
         <label class="custom-control-label" for="defaultInline2">Clássico</label>
      </div>
      <div class="custom-control custom-radio custom-control-inline">
         <input type="radio" class="custom-control-input" id="defaultInline3" name="inlineDefaultRadiosExample">
         <label class="custom-control-label" for="defaultInline3">Grátis</label>
      </div>
   </div>
</div>

在我的行中,我这样做:

.row{
    display: flex;
    justify-content: center;
}

但是我有这个:

enter image description here

如何将所选内容居中对齐,并在右侧将单选按钮对齐?

0 个答案:

没有答案