Отображение HTML-элементов в одной строке

#html #angular

Вопрос:

Я ищу такие варианты, как

Но с текущим кодом я получаю его, как показано ниже:

Как получить варианты » Да » и » Нет » рядом друг с другом

Ниже приведен мой код: Для HTML

 <div class="mycustom-radios">            
            <div class="mycustom-radios__item" *ngFor="let employeeType of employeeTypes">
                <input class="mycustom-radios__input" id="e_employeetype" name="what-type-of-employee" type="radio" [value]="employeeType" [(ngModel)]="selectedemployeeType"/>
                <label class="mycustom-label mycustom-radios__label" for="e_employeeType">
                <p>{{employeeType}}</p>
                </label>
            </div>      
        </div>

Для компонента.ts

 selectedemployeeType: string;
employeeTypes: string[] = ['Yes', 'No'];

1. DIV является элементом уровня блока, поэтому каждый тип сотрудника (элемент уровня блока) занимает все горизонтальное пространство своего родительского элемента. Если вы этого не хотите, вы можете либо изменить DIV на встроенный элемент, либо изменить стили/классы, чтобы изменить этот конкретный div на встроенный элемент. (встроенный или другой тип отображения; гибкая сетка и т.д.).

Ответ №1:

@Пэтти! Попробуйте использовать свойство CSS display:flex, например:

 <div style="display:flex">
<div>div block 1</div>
<div>div block 2</div>
</div>

Ответ №2:

Вам нужно применить стили CSS вот так.

 // use this styling
div{
  display:flex;
  align-items:center;
}    
input{
  margin-right:5px;
}
input:last-child{
  margin-right:0px;
}

 <div>
     <!-- nest your angular controls here -->
     <input type="checkbox" />
     <input type="checkbox" />
     <input type="checkbox" />
     <input type="checkbox" />
     <input type="checkbox" />
</div>

Ответ №3:

Измените p span и примените display:inline , как в приведенном ниже примере. В примере я добавил 2 дива для имитации *ngFor="let employeeType of employeeTypes"

 .mycustom-radios__item {
  display: inline-flex;
}

 <div class="mycustom-radios">
  <div class="mycustom-radios__item" *ngFor="let employeeType of employeeTypes">
    <input class="mycustom-radios__input" id="e_employeetype" name="what-type-of-employee" type="radio" [value]="employeeType" [(ngModel)]="selectedemployeeType" />
    <label class="mycustom-label mycustom-radios__label" for="e_employeeType">
                <span>No</span>
                </label>
  </div>
  <div class="mycustom-radios__item" *ngFor="let employeeType of employeeTypes">
    <input class="mycustom-radios__input" id="e_employeetype" name="what-type-of-employee" type="radio" [value]="employeeType" [(ngModel)]="selectedemployeeType" />
    <label class="mycustom-label mycustom-radios__label" for="e_employeeType">
                <span>Yes</span>
                </label>
  </div>
</div>

Ответ №4:

Это сделает свое дело:

 .mycustom-radios {
    display: flex;
    flex-direction: row;
}

Или:

Вы можете изменить отображение ваших элементов на встроенный блок, как это:

 .mycustom-radios__item {
    display: inline-block;
}

Если вы используете гибкий дисплей, обязательно добавьте гибкую обертку для экранов меньшего размера (например, для телефонов).:

 .mycustom-radios {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}