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

Question

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

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

这是我的 View 代码:

<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>