html - CSS 两个 span 或 div 在同一行中都在一个 div 中

Question

我正在努力实现这个结果:

但我无法用数字正确定位两个 div(或跨度)。

我试过使用两个带有 inline-block 的 span 来显示，这样:

HTML:

<div class="row">
    <mat-form-field class="col">
        <mat-label>{{ 'REPORTISTICA_UFFICI_QUALITA.select_report' | translate }}</mat-label>
        <mat-select (selectionChange)="onChangeSelection($event)" [(value)]="actualView">
          <mat-option *ngFor="let report of mappaReport" [value]="report.value">
            {{report.description}}
          </mat-option>
        </mat-select>
    </mat-form-field>
    <div class="col-dettagli"  *ngIf="actualView == 'cooperative' ">
      <span class="col-interventi-attivita" >
      <mat-label>Interventi</mat-label>
          <input matInput type="text"
                  placeholder="{{ totaleInterventi }}" [readonly]="true">
      </span>
      <span class="col-interventi-attivita">
              <mat-label>Attivita</mat-label>
          <input matInput type="text"
                  placeholder="{{ totaleAttivita }}" [readonly]="true">
                  </span>
    </div>
  </div>

CSS:

.col {
  width: 25%;
}

.col-dettagli{
  text-align: right;
}

.col-interventi-attivita{
  display: inline-block;
}

但这不正确，我明白了:

然后我尝试将 CSS 更改为:

.col {
  width: 25%;
}

.col-dettagli{
  text-align: right;
  display: inline;
}

.col-interventi-attivita{
  display: inline-block;
}

我明白了:

完整的 HTML:

<mat-card class="mat-card">
  <mat-card-header class="label">
    <mat-card-title>Title</mat-card-title>
  </mat-card-header>
  <form>
    <div class="row">
    <mat-form-field class="col">
        <mat-label>{{ 'REPORTISTICA_UFFICI_QUALITA.select_report' | translate }}</mat-label>
        <mat-select (selectionChange)="onChangeSelection($event)" [(value)]="actualView">
          <mat-option *ngFor="let report of mappaReport" [value]="report.value">
            {{report.description}}
          </mat-option>
        </mat-select>
    </mat-form-field>
    <div class="col-dettagli"  *ngIf="actualView == 'cooperative' ">
      <span class="col-interventi-attivita" >
      <mat-label>Interventi</mat-label>
          <input matInput type="text"
                  placeholder="{{ totaleInterventi }}" [readonly]="true">
      </span>
      <span class="col-interventi-attivita">
              <mat-label>Attività</mat-label>
          <input matInput type="text"
                  placeholder="{{ totaleAttivita }}" [readonly]="true">
                  </span>
    </div>
  </div>


  </form>
</mat-card>

完整的 CSS:

.col {
  width: 25%;
}

.col-dettagli{
  text-align: right;
  display: inline;
}

.col-interventi-attivita{
  display: inline-block;
}

#textLabel {
  padding: 0px 10px;
}

.mat-card {
  max-height: 400px;
  overflow-y: auto;
}

.mat-card {
  background: none;
  box-shadow: none;
  max-height: none;
}

.mat-form-field {
  padding: 15px
}

.mat-card form {
  background: #ffffff;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.mat-card-header .mat-card-title {
  font-size: 14px;
  font-weight: 900;
  line-height: 19px;
  position: relative;
  padding: 3px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 0px;
}

.mat-card-header {
  position: relative;
  background: #f4f4f4;
  border-radius: 12px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.mat-card-header:before {
  position: absolute;
  content: "";
  background: $red;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  top: 6px;
  left: 6px;
}

更新

liamgbs 的回答是正确的，但我不得不稍微更改一下，因为我无法更改主容器的代码。所以现在是:

HTML:

<div class="col-dettagli"  *ngIf="actualView == 'cooperative' ">
      <div>
      <mat-label>Interventi</mat-label>
          <input matInput type="text"
                  placeholder="{{ totaleInterventi }}" [readonly]="true">
      </div>
      <div>
              <mat-label>Attività</mat-label>
          <input matInput type="text"
                  placeholder="{{ totaleAttivita }}" [readonly]="true">
      </div>
    </div>

CSS:

.col-dettagli{
  display: inline-flex;
  justify-content: space-between;
  width: 130px;
  float: right; 
}

Answer 1

看看 CSS Flexbox，它是用于响应式定位的重要 CSS 技能，很可能是您正在寻找的东西。

检查以下代码并尝试使其适应您的应用程序:

    .outer {
        display: flex;
        justify-content: space-between;
    }

    .inner-left {
        border: solid black 1px;
        width: 300px;
    }
    .inner-right {
        display: flex;
        justify-content: space-between;
        width: 100px;
        border: solid black 1px;

    }

<div class="outer">
    <div class="inner-left">
        A
    </div>

    <div class="inner-right">

        <div>
           B
        </div>

        <div>
           C
        </div>

    </div>
</div>