如何使用css和html創建應用程序表單行

您好朋友我正在嘗試使用html和css創建應用程序表單行，它應該看起來像下面的圖像。因爲我會用pdf包裝它，所以將所有東西都放在桌子上是必需的嗎？誰能幫幫我嗎？如何創建精確的應用程序線，如貝爾圖像。這裏是我已經嘗試過[demo][1]如何使用css和html創建應用程序表單行

這是我更新的代碼，但我不認爲位置絕對將在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>

她是Fiddle to try

來源

2017-01-23 Sudarshan Kalebere

分享您的代碼，你已經嘗試過 – M3ghana

有意思的是這兩個CSS辦法失敗。你用什麼軟件轉換成PDF？ – backpackcoder

所有表中的文本需要在一個<td>標籤。我會在表中添加一個類來控制字體大小和粗體，以防止在任何地方使用<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>

來源

2017-01-23 08:29:48 backpackcoder

非常感謝您的回覆和答覆，但是當我轉換爲pdf時，它不會同樣。 :-( –

）謝謝你的回覆，它在小小的css之後工作，但是你的桌子結構做了這個訣竅，再加上+10。乾杯 –

當然，這取決於你打算迪究竟是什麼。但在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/

來源

2017-01-23 08:30:00 BurninLeo

非常感謝你的回覆和回答，但是當我轉換成pdf的時候，。:-( –

感謝您在這裏的回覆我投你10+回答我的問題，並教授有關位置相關的新內容，我會記住這一點，但是來自prev answer的表結構對我有用 –

如何使用css和html創建應用程序表單行

回答

相關問題