如何使用css和html创建应用程序表单行

Hi friends I am trying to create an application form line using html and css, it should look like below image. As I will be wrapping it in pdf so will it be necessory to put everything in table? can anyone please help me? How do I create exact application line like belwo image. here is what I have tried [demo][1]

嗨朋友我正在尝试使用html和css创建一个应用程序表单行，它应该看起来像下面的图像。因为我将用pdf包装它所以将所有内容放在表格中是必要的吗？谁能帮帮我吗？如何创建像belwo图像这样的精确应用程序行。这是我试过的[demo] [1]

Here is my updated code, but I dont think position absolute will work in pdf so please html me to get this in pdf.

这是我的更新代码，但我不认为绝对位置将在pdf中工作所以请html我用pdf得到这个。

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

Her is Fiddle to try

她是小提琴尝试

2 个解决方案

#1

All the table text needs to be in a <td> tag. I would add a class to the table to control the font-size and boldness to prevent using <h3>s everywhere.

所有表格文本都必须位于标签中。我会在表中添加一个类来控制字体大小和粗体，以防止在任何地方使用

。

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>

#2

Of course, it depends on what you're planning to di exactly. But relative positioning in CSS is very powerful, e.g.

当然，这取决于你计划准确地做什么。但CSS中的相对定位非常强大，例如

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

With this CSS

有了这个CSS

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

View result here: https://jsfiddle.net/36vkf34h/

在此处查看结果：https：//jsfiddle.net/36vkf34h/

#1