Плавающее положение в Angular

Question

Я хочу установить позицию своего элемента справа в элементе div. float:right не работает, поэтому я пытаюсь margin-left:auto, но выглядит красиво, если у меня есть только один элемент. Как я могу добиться этого для нескольких элементов?

My CSS:

  .toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    background-color: #1976d2;
    color: white;
    font-weight: 600;
  }

  .toolbar a {
     /*float:right;*/
    margin-left: auto;
  }

Answer 1

Вы не можете использовать display:flex с float, потому что это противоречит правилам - по умолчанию значения с плавающей точкой игнорируются в flex containers. Вы должны либо использовать float, либо flex для своего макета, и я вряд ли рекомендую flex.

. Я советую для дальнейшего чтения: flex guid

. Вы вводите стили с помощью:

 .toolbar {
    position: absolute;
    top: 100;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: #1976d2;
    color: white;
    font-weight: 600;
}

Тем не менее, если вы хотите, чтобы ваш код работал с floats, вам придется удалить align-items, являющееся свойством flex, и удалить display:flex, что сделает ваш код на работу - предметы будут плавать вправо.