cssとhtmlを使用してアプリケーションフォームラインを作成するには

Question

こんにちはお友達htmlとcssを使用してアプリケーションフォームを作成しようとしています。 私はpdfでそれをラッピングするので、テーブルにすべてを入れる必要がありますか？誰でも私を助けてくれますか？ belwoイメージのような正確なアプリケーションラインを作成するにはどうすればいいですか？ ここに私が試したことです[demo][1]

ここに私の更新されたコードがありますが、絶対位置はpdfで動作するとは思わないので、pdfでこれを取得するにはhtmlしてください。

<table> 
      <tr> 
       <h3 style="position:relative">Signed at_________, this __________</h3> 
       <span style="position: absolute;top: 40px;left: 110px;font-weight: bold;">ville</span> 
       <span style=" position: absolute;top: 40px;left: 240px;font-weight: bold;">date</span> 
      </tr> 

     </table> 

彼女はすべてのテーブルのテキストは<td>タグにする必要がありますFiddle to try

Answer 1

です。 <h3>をどこでも使用することを防ぐために、フォントサイズと大胆さを制御するクラスをテーブルに追加します。もちろん

table { 
 
    font-weight: bold; 
 
    border-collapse: collapse; 
 
} 
 

 
.row-form { 
 
    background-color: #ffff00; 
 
} 
 

 
.row-description { 
 
    text-align: center; 
 
}

<table> 
 
    <tr class="row-form"> 
 
    <td>Signed at</td> 
 
    <td>________________</td> 
 
    <td>, this&nbsp</td> 
 
    <td>________________</td> 
 
    </tr> 
 
    <tr class="row-description"> 
 
    <td></td> 
 
    <td>ville</td> 
 
    <td></td> 
 
    <td>date</td> 
 
    </tr> 
 
</table>

Answer 2

、それはあなたが正確にディに計画しているかに依存します。しかし、CSSの相対的な配置は非常に強力です。

このCSSで

<p> 
This is a line with <span class="inputline"><span class="subtext">some attribute</span></span> spacing. 
</p> 

span.inputline { 
    display: inline-block; 
    width: 6em; 
    position: relative; 
    border-bottom: 1px solid; 
} 
span.subtext { 
    display: block; 
    width: 100%; 
    position: relative; 
    bottom: -1.1em; 
    font-size: 80%; 
    text-align: center; 
} 

ここに表示結果：https://jsfiddle.net/36vkf34h/