帶有下劃線字段填充的HTML文檔

所以我創建了一個HTML文件，其中有一些字段被加下劃線並需要動態填充，但是我無法正確設置它。我需要做的是這樣的：帶有下劃線字段填充的HTML文檔

「申請人姓：_________ bar_____________名字：_________ foo_____________」

的第一行，然後：

「學校名稱」 _Some name_______________________________________________________」

所以我正在動態填寫的文本必須在線上，好像它是手工填充的，但是我不知道它的長度，而且我對css很不好。我嘗試了一個表格，其中的靜態文本是<td>和下劃線是另一個<td>，但不能對第二行進行適當的格式化，通過這種邏輯，我將在第一行中具有與第一行中的四個<td>元素具有不同寬度的元素。

來源

2015-12-12 ppepii

使用常規<input type="text">領域，並與相應的CSS樣式他們：background: none; border: none; border-bottom: 1px solid black;等等，等等

來源

2015-12-12 18:56:08 Johannes

領域不會通過他們應該看起來像一個文件，要手工填寫用戶填補，只有信息已經顯示在強調。問題是使用動態寬度和下劃線設置靜態文本的寬度 – ppepii

OH我現在明白了它的工作原理，非常感謝 – ppepii

我不完全確定你的意思，但是如果你只需要沒有任何輸入功能的行：插入具有'display：inline-block'，'width'您想要的'，高度爲1em或更小，'border-bottom：1px純黑色'的DIV。確切的靜態文本寬度是不可預測的（取決於字體，字體大小，瀏覽器的文本渲染等），但這樣你至少可以接近你想要的。 – Johannes

不知道如果我理解正確你的問題，但它看起來像你想要的三種輸入類型的姓，名和校名。我用兩個獨立的div將它們放在兩條不同的線上。

HTML：

<div class="first"> 
    <p>Applicant's Last Name: <input type="text" maxlength="20"/>First Name:<input type="text" maxlength="20"/></p> 
    </div> 
    <div class="sec"> 
    <p>School Name: <input type="text" maxlength="50"/></p> 
    </div>

CSS：

input{ 
    border: none; 
    border-bottom: 1px solid black; 
}

來源

2015-12-12 19:03:47 Froy

帶有下劃線字段填充的HTML文檔

回答

相關問題