Блог

Главная - Вопросы по программированию - Проблема с выравниванием всех кнопок в правильном положении

Проблема с выравниванием всех кнопок в правильном положении

#html #css #flexbox #angular-material

#HTML #css #flexbox #angular-материал

Вопрос:

Я использую компонент панели инструментов angular material (10.2.5), и я хочу, чтобы мои три кнопки были повернуты вправо, но я не могу

 <mat-toolbar color="primary">
    <mat-toolbar-row>
      <h3 [style.color]="'white'">Portail admin</h3>
  <div class="parent">
    <div class="children right-children">
      <div class="child"><a mat-flat-button >Liste des livres</a></div>
      <div class="child"><a mat-flat-button >Ajouter un livre</a></div>
      <div class="child"><a mat-flat-button >Deconnexion</a></div>
    </div>
  </div>
    </mat-toolbar-row>
  </mat-toolbar>

.parent {
    display: flex;
    width: 100%;
    height: 100px;
    align-items: center; 
    justify-content: space-between; 
  }
  
  .children {
    display: flex;
  }
  
  .child {
    margin: 0 5px;
    padding: 0 5px;
    font-size: 10px;
    color: #000;
  }

введите описание изображения здесь

Есть идеи?
Я хочу выровнять свои три кнопки слева от панели инструментов, но я действительно не могу этого сделать.

Для моего html- и css-кода я использовал flexbox css.

Комментарии:

1. где находится класс children right-children?

2. Дополните это своим кодом: codesandbox.io/s/g0rol?file=/src/index.html

Ответ №1:

Ответ 

 .parent {
    display: flex;
    width: 100%;
    height: 100px;
    align-items: center; 
    justify-content: space-between; 
    
  }
  
  .children {
    display: flex;
}
  
  .child {
    margin: 0 5px;
    padding: 0 5px;
    font-size: 10px;
    color: black;
  }

.right-children{
  position:absolute;
  right:0;
}  
 <mat-toolbar color="primary">
    <mat-toolbar-row>
      <h3 [style.color]="'white'">Portail admin</h3>
  <div class="parent">
    <div class="children right-children">
      <div class="child"><a mat-flat-button >Liste des livres</a></div>
      <div class="child"><a mat-flat-button >Ajouter un livre</a></div>
      <div class="child"><a mat-flat-button >Deconnexion</a></div>
    </div>
  </div>
    </mat-toolbar-row>
  </mat-toolbar>

Добавлено:

 .right-children{
position:absolute;
right:0;
}

Ответ №2:

Я пытался меньше касаться вашего css и использовать flex, как вы упомянули, используя их, а не grid.

По сути, ваш mat-toolbar-row будет горизонтальным изгибом. И ваш родительский класс будет иметь justify-content: end; 

 mat-toolbar-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between; 
}

h3 {
  white-space: nowrap;
}

.parent {
    display: flex;
    flex: 1;
    height: 100px;
    align-items: center; 
    justify-content: end; 
    white-space: nowrap;
  }
  
  .children {
    display: flex;
  }
  
  .child {
    margin: 0 5px;
    padding: 0 5px;
    font-size: 10px;
    color: #000;
  }  
 <mat-toolbar color="primary">
  <mat-toolbar-row>
    <h3 [style.color]="'white'">Portail admin</h3>
    <div class="parent">
      <div class="children right-children">
        <div class="child"><a mat-flat-button >Liste des livres</a></div>
        <div class="child"><a mat-flat-button >Ajouter un livre</a></div>
        <div class="child"><a mat-flat-button >Deconnexion</a></div>
      </div>
    </div>
  </mat-toolbar-row>
</mat-toolbar>

Ответ №3:

просто добавьте это

   .child {  
    display: inline-block;
    margin: 0 5px;
    padding: 0 5px;
    font-size: 10px;
    color: #000;
  } 
  .right-children{
    position: relative;
    bottom:80px;   
    display: inline-block;
    margin-left:1000px ;
  }

Результат: https://i.stack.imgur.com/6JD3h.png