Как установить ширину тега <span>в угловых?

Question

Это мой HTML-код.

<div class="col-md-8">
   <span class="label">Product Name</span>
   <span>
      <mat-form-field>
         <input matInput formControlName="productName">
      </mat-form-field>
   </span>
</div>  

Код CSS:

.label { width: 180px; } span{ display: inline-block; }

В этом коде класс 'label' имеет фиксированную ширину, но другой диапазон не принимает оставшуюся ширину col-md-8.

Answer 1

Вы можете использовать сетку столбцов также для тега span и span в классе строк

вот пример

<div class="row">

    <span class="col-md-2">Product Name</span>
    <span class="col">
        <mat-form-field>
            <input matInput>
        </mat-form-field>
    </span>
</div>

Answer 2

Пожалуйста, попробуйте это

.label { width: 180px; } span{ width:100%; }

Answer 3

Это вопрос CSS, здесь не должно быть углов.

С помощью flexbox вы можете достичь желаемого макета.

Теперь то, что вы, вероятно, должны делать, примерно так:

<style>
  .labeled-input {
    display: flex;
  }
  .labeled-input input {
    flex-grow: 1;
  }
</style>
<div class="labeled-input">
   <label for="productName">Product Name</label>
   <input name="productName" />
</div>  

Так что используйте элемент label для метки и установите, для какого ввода он используется.