どのようにhtml/cssでMSの単語のタブ機能を達成するには？

Question

今、私はhtmlファイルを書いています。これは、今後のプログラミングのためにMS Wordファイルの見通しを複製したいだけです。しかし、どのように次のイメージを達成するために？ This one

私はちょうどアンダースコアを使用するので、2つのコロンを同じ位置に置くことはできません。 ありがとうございます。

---

これで、thisしか達成できません。このコードにより、 ：あなたの助け

.box{float:left; margin-right:10px;} 
 
input{border:0;border-bottom:1px solid #000; background: transparent; 
 
    outline: none;}

<div> 
 
    <div class="box"> 
 
     <lable style="display:inline-block; min-width:50px;">Applicant’s signature</lable> 
 
<span>:</span> 
 
    <input type="text"> 
 
    </div> 
 
    <div class="box"> 
 
     <lable style="display:inline-block; min-width:50px;">Date</lable> 
 
<span>:</span> 
 
    <input type="text"> 
 
    </div> 
 
    <div class="box"> 
 
     <lable style="display:inline-block; min-width:50px;">Applicant’s name</lable> 
 
<span>:</span> 
 
    <input type="text"> 
 
    </div> 
 

 
</div>

ありがとう！

Answer 1

.box{float:left; margin-right:10px;} 
 
lable{display:inline-block; min-width:50px;} 
 
input{border:0;border-bottom:1px solid #000;}

<div> 
 
    <div class="box"> 
 
     <lable>Date</lable> 
 
<span>:</span> 
 
    <input type="text"> 
 
    </div> 
 
    <div class="box"> 
 
     <lable>Name</lable> 
 
<span>:</span> 
 
    <input type="text"> 
 
    </div> 
 
    <div class="box"> 
 
     <lable>Name</lable> 
 
<span>:</span> 
 
    <input type="text"> 
 
    </div> 
 
    <div class="box"> 
 
     <lable>Name</lable> 
 
<span>:</span> 
 
    <input type="text"> 
 
    </div> 
 
</div>