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：

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

Answer 2

使用flex-grow attribrute，您可以在父display: flex内按比例分配项目，如下所示：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

调整包含Div中两个按钮的宽度

2 个答案: