如何使字段的下劃線看起來均勻？

Question

現在我創建一個html來複制word文件。以及如何實現以下展望？ This one

我使用下劃線來表現字段。我怎樣才能使每條線的末端相等？還有一點要注意的是，這個div應該是style="padding-left: 200px;"，與整個文件相比。

謝謝。

Answer 1

亞歷克斯，要實現這一點，你需要使用某種形式的佈局元素。有幾個選項，但今天最流行的是Flexbox。

要使用Flexbox，就達到這個目的，你可以這樣做：

HTML：

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

CSS：

* { 
    box-sizing: border-box; 
} 

.row { 
    display: flex; 
    flex-direction: row; 
} 

.row span { 
    flex: 1; 
    display: block; 
} 

.row span input { 
    width: 100%; 
    margin-left: 5px; 
    border: none; 
    border-bottom: 1px solid #000; 
    background: transparent; 
    outline: none !important; 
} 

見JSFiddle