如何使字段的下划线看起来均匀？

Question

现在我创建一个html来复制word文件。以及如何实现以下展望？This one

我使用下划线来表现得像场一样。如何使每条线的末端相等？还有一点需要注意的是，与整个文件相比，这个div应该是style="padding-left: 200px;"。

谢谢。

Answer 1

Alex，要实现这一点，您需要使用某种形式的布局元素。有几种选择，但今天最流行的是Flexbox。

要使用Flexbox实现此目的，您可以执行以下操作：

HTML：

android:layout_width="match_parent"

CSS：

<form class="form">
  <div class="row">
    <label>First Field</label>
    <span>
      <input>    
    </span>
  </div>
  <div class="row">
    <label>Second Field</label>
    <span>
      <input>    
    </span>
  </div>
  <div class="row">
    <label>Third and Final Field</label>
    <span>
      <input>    
    </span>
  </div>
</form>

请参阅JSFiddle