Question

我有我的md-toolbar

＆＃13;

#logo {
  padding-left: 7px;
  object-fit: contain;
}

.language-selector{
  right: 0 !important;
}

.md-toolbar-tools {
  display: flex;
  background: #eeeeee;
  max-width: 100%;
  max-height: 1.3cm !important;
}

＆＃13;

<div id="toolbarContainer" layout="column" ng-cloak>
  <md-content> 
    <md-toolbar md-scroll-shrink>
      <div class="md-toolbar-tools">
        <img id="logo" src="https://angular.io/assets/images/logos/angular/angular.svg">
        <h2></h2>
        <span flex></span>

        <select class="language-selector" ng-change="translate()" ng-model="selectedLanguage">
          <option value="en">English</option>
          <option value="no">Norsk</option>
        </select>
      </div>
    </md-toolbar>
    <div ng-view class="fade"></div>
  </md-content>
</div>

＆＃13;

我想让我的语言下拉菜单显示在md-toolbar的右侧，但我没有得到它......有什么建议吗？

我已经尝试了this解决方案，但仍无法正常工作。

Answer 1

使用justify-content : space-between在Flex子女之间留出空间。

#logo {
  padding-left: 7px;
  object-fit: contain;
}

.language-selector{
  right: 0 !important;
}

.md-toolbar-tools {
  display: flex;
  justify-content : space-between;
  background: #eeeeee;
  max-width: 100%;
  max-height: 1.3cm !important;
}

<div id="toolbarContainer" layout="column" ng-cloak>
  <md-content>
    <md-toolbar md-scroll-shrink>
      <div class="md-toolbar-tools">
        <img id="logo" src="https://angular.io/assets/images/logos/angular/angular.svg">
        <h2></h2>
        <span flex></span>

        <select class="language-selector" ng-change="translate()" ng-model="selectedLanguage">
          <option value="en">English</option>
          <option value="no">Norsk</option>
        </select>
      </div>
    </md-toolbar>
    <div ng-view class="fade"></div>
  </md-content>
</div>

Angularjs <span flex =“”> <！ - span - >未对齐元素

1 个答案: