如何放入相同的（标签）文本行：输入？图片

Question

我希望标签和输入都在线，而不是像在图像中。你能告诉我这个HTML代码有什么问题吗？如何解决我的问题？

我有这个代码html：

<div class="contant">
    <div class="row">
      <div class="input-field col s4">
        <label for="invoice_number">Number:</label>
        <input formControlName="invoice_number" id="invoice_number" type="text" class="validate">
      </div>
      <div class="input-field col s4">
        <div class="row">
          <label for="invoice_date">Date:</label>
          <input formControlName="invoice_date" id="invoice_date" type="date" class="datepicker" materialize="pickadate" [materializeParams]="[{ format: 'yyyy-mm-dd', formatSubmit: 'yyyy-mm-dd',
          closeOnSelect: true, selectMonths: true, selectYears: true, today: '',
          max: true, onSet: onSetDatepicker }]">
        </div>
      </div>
      <div class="input-field col s4">
        <p style="text-align: center; color:black">Some Data</p>
        <div class="input-field col s2">
          <label for="client_id">First Last Name:</label>
          <input formControlName="client_id" id="client_id" type="text" class="validate">
        </div>
        <br>
        <div class="input-field col s2">
          <label for="phone">Phone:</label>
          <input formControlName="phone" id="phone" type="text" class="validate">
        </div>
        <br>
        <div class="input-field col s2">
          <label for="add">Add:</label>
          <input formControlName="add" id="add" type="text" class="validate">
        </div>
      </div>
    </div>
  </div>

此代码显示此照片：

的CSS

    label {
      width:180px;
      clear:left;
      text-align:left;
      padding-left:1.5px;
  }

我想显示这张图片：

Answer 1

您应该添加到标签position: absolute;并添加到输入border-bottom: 1px solid rgb(117, 117, 117);，当然还要设置合适的填充