时间戳

首页 > 解决方案 > Angular中的浮动位置

css - Angular中的浮动位置

问题描述

我想将元素的位置设置在元素内的右侧div。float:right 不起作用，所以我尝试margin-left:auto，但如果我只有一个元素，它看起来很漂亮。我怎样才能为多个元素实现这一点？

我的 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;
  }

标签： cssangular

解决方案

您不能使用display:flexwith ，float因为它违反了规则 - 默认情况下，浮点数在flex containers. 您应该在布局中使用浮动或 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-itemswhich 是flexproperty 和 remove display:flex，这将使您的代码正常工作 - 项目将正确浮动。

推荐阅读