调整包含div内两个按钮的宽度

Question

在我的 Angular 应用程序中，我有一个 UI 部分，它由两个按钮组成——一个带有一些文本（浮动到左侧）和一个箭头（浮动到右侧）。如果用户单击左侧（文本所在的位置），则会触发一个功能。如果他们单击右侧（箭头所在的位置），则会触发不同的功能 - 打开一个包含其他选项的子菜单。

按照我的编程方式和样式，一切都按预期工作。但是，目前，文本部分和箭头部分按钮在包含元素内的宽度相等。我想让文本部分按钮占据大约 70% 的包含元素，箭头按钮占据大约 30%。我已经尝试将宽度百分比添加到每个按钮的相关 css 中，但这似乎不会影响结果。我需要如何调整样式才能完成此操作？

这是我的查看代码：

<div class="move-btn-container">
        <button md-button class="left-btn" *ngIf="!isPracticing()"
           (click)="moveRecord(stage = getNextStage())">Advance Stage
        </button>
        <button md-button class="left-btn" *ngIf="isPracticing()"
           (click)="onDischargingClicked()">Initiate Discharge
        </button>
        <button [mdMenuTriggerFor]="menu" md-button class="right-btn">
            <md-icon class="arrow-center-align">arrow_drop_down</md-icon>
              <md-menu #menu="mdMenu">
              // sub-menu options code
             </md-menu>
        </button>
</div>

这是 LESS/CSS 样式：

.move-btn-container {
   background-color: #cfcfcf;
}

.left-btn {
   float: left;
   background-color: #cfcfcf;
}

.right-btn {
   float: right;
   background-color: #dbdbdb;
}

.arrow-center-align {
   vertical-align: middle;
}

Answer 1

你为什么不按你说的那样使用 flex：

.container {
  display: flex;
  flex-wrap: wrap;
  padding: 15px 15px 0 0;
  background: #CDD6D0;
}

.g {
  background: #E16036;
  border: 4px solid #E3170A;
  border-radius: 8px;
  padding: 15px;
  color: white;
  font: 18px Arial;
  margin: 0 0 15px 15px;
}

.grid-30 {
  width: calc(33% - 15px);
}

.grid-70 {
  width: calc(66% - 15px);
}

<div class="container">
  <button class="g grid-70">
    <p>Test</p>
  </button>
  <button class="g grid-30">
    <p>Test</p>
  </button>
</div>

Answer 2

使用flex-grow 属性，您可以在父display: flex 中按比例分隔项目，如下所示：

.move-btn-container {
  width: 200px;
  margin: auto;
  background-color: red;
  display: flex;
}

.left-btn {
  flex-grow: 7;
   background-color: #cfcfcf;
}

.right-btn {
  flex-grow: 3;
  background-color: green;
}

<div class="move-btn-container">
    <div md-button class="left-btn" *ngIf="isPracticing()"
         (click)="onDischargingClicked()">Initiate Discharge
    </div>
    <div [mdMenuTriggerFor]="menu" md-button class="right-btn">
      V
    </div>
  </div>