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

时间:2017-01-23 08:14:50

标签: html css

嗨朋友我正在尝试使用html和css创建一个应用程序表单行,它应该如下图所示。 因为我将用pdf包装它所以将所有东西都放在桌子上是必要的吗?谁能帮帮我吗?如何创建像belwo图像这样的精确应用程序行。 这是我尝试过的[demo][1]

这是我更新的代码,但我不认为绝对位置会以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>

enter image description here

她是Fiddle to try

2 个答案:

答案 0 :(得分:1)

所有表格文字都必须位于vnoremap <leader>eaa :s/é/\\'e/g vnoremap <leader>eag :s/è/\\`e/g vnoremap <leader>eac :s/^/\\^e/g vnoremap <leader>aag :s/à/\\`a/g vnoremap <leader>iac :s/î/\\^i/g vnoremap <leader>oac :s/ô/\\^o/g etc. 标记中。我会在表格中添加一个类来控制字体大小和粗体,以防止在任何地方使用<td>

&#13;
&#13;
<h3>
&#13;
table {
  font-weight: bold;
  border-collapse: collapse;
 }

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

.row-description {
  text-align: center;
}
&#13;
&#13;
&#13;

答案 1 :(得分:1)

当然,这取决于你计划完全准备的内容。但CSS中的相对定位非常强大,例如。

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

使用此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;
}

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