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

在此代码中，“标签”类的宽度固定，但是另一个跨度不占用col-md-8的剩余宽度。

Answer 1

这是一个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元素用作标签并设置其输入内容。

Answer 2

您还可以在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 3

请尝试这个

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

如何设置角度的<span>标签宽度？

3 个答案: