如何在HTML中創建這個簡單的表單示例？

Question

我是一名HTML / CSS設計經驗有限的開發人員。 我一直試圖創建這個簡單的表格超過一個小時，所以我放棄並尋求幫助。

我嘗試過這樣的事情：

<ul>
    <li><label>Name:</label><span class="line">&nbsp</span></li>
    ...
</ul>

li label {
    display: inline-block;
}

li span {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #000;
}

我不知道如何表達我希望跨度占據標簽和包含div之間寬度的100％。

我希望渲染的HTML看起來與我的示例圖像完全一樣。 也就是說，整個列表項不應加下划線，只應填寫客戶填寫信息的空間。

請讓我知道如何實現這一目標。 謝謝！！！

Answer 1

這是一個你想做的簡單例子 。 基本上，你給li一個底邊框，並將它與label的邊框重疊以遮蓋黑線。

li
{
    border-bottom: 1px solid black;
    width: 250px;
}

label
{
    border-bottom: 2px solid white;
    padding-right: 5px;
}

---

我不確定上述解決方案是如何跨瀏覽器的，所以你可能想要使用一些額外的指令， 以防萬一 （未經測試）：

li
{
    border-bottom: 1px solid black;
    width: 250px;
}

label
{
    background: white;
    position: relative;
    border-bottom: 2px solid white;
    padding-right: 5px;
}

---

跨瀏覽器解決方案 （據我所知）：

感謝@Joseph， 這個解決方案是在標簽下顯示細線。

Answer 2

編輯

meh ...我更喜歡我對JamWaffles答案的改編 （評論）。 他應該得到信用。 ：P

---

演示

這是一種非常糟糕的做法：P

HTML

<ul>
    <li><label>Name:</label></li>
    <li><label>Address:</label></li>
    <li><label>City:</label></li>
    <li><label>State:</label></li>
    <li><label>Zip:</label></li>
</ul>

CSS

li label {
    margin-bottom:-1px;
    display: inline-block;
    border-bottom: 1px solid #fff;
    padding-right:10px;
}

li {
    width: 100%;
    border-bottom: 1px solid #000;
}

Answer 3

好吧，我真的很討厭回答我自己的問題，但這似乎是實現這一結果的最不實際的方式。 我會讓投票決定。 再次感謝所有的幫助。 我無法相信我花了多長時間搞清楚這一點！

使用display的解決方案：table-cell

li label {
    display: table-cell;
}

li span {
    display: table-cell;
    width: 100%;
    border-bottom: 1px solid #000;
}

<ul>
    <li><label>Name:</label><span></span></li>
    <li><label>Address:</label><span></span></li>
    <li><label>City:</label><span></span></li>
    <li><label>State:</label><span></span></li>
    <li><label>Zip:</label><span></span></li>
</ul>

Answer 4

在要包含border-bottom的范圍中添加一個類

例

li span.underline {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #000;
}

Answer 5

有趣的概念。 我會解決這樣的問題：

<style type="text/css">
    input.line {
        border: 0;
        border-bottom: 1px solid #000;
    }
</style>

<ul><li><label for="name">Name: </label><input class="line" name="name" /></li><br />
<li><label for="address">Address: </label><input class="line" name="address" /></li><br />
<li><label for="city">City: </label><input class="line" name="city" /></li><br />
<li><label for="state">State: </label><input class="line" name="state" /></li><br />
<li><label for="zip">ZIP: </label><input class="line" name="zip" /></li></ul><br />

編輯這是一個功能表單的代碼，你可以把東西輸入，我沒有意識到你只是想要下划線。 無論哪種方式，這個解決方案應該適用於兩者。

Answer 6

這是一個解決方案 ：

HTML：

<ul>
    <li><span class="label">Name:</span><span class="line name"></span></li>
    <li><span class="label">Address:</span><span class="line address"></span></li>
    <li><span class="label">City:</span><span class="line city"></span></li>
    <li><span class="label">State:</span><span class="line state"></span></li>
    <li><span class="label">Zip:</span><span class="line zip"></span></li>
</ul>

CSS：

ul {width: 300px;}

.line {
    float: left;
    display: inline-block;
    border-bottom: 2px solid black;
    margin-left: 5px;
    width: 100%;
    margin-top: -5px;
}

.label {
    display: inline-block;
    background-color: white;
    margin-top: 10px;
    padding-right: 5px;
}


li span {font-family: sans-serif;}

li {line-height: 1.3em;}

Answer 7

為了將來參考，這是另一種方法： http ： //jsfiddle.net/thirtydot/7SFDV/ 。

這個唯一真正的區別（超過你的答案）是它可以在IE7中工作，這可能與你無關。 我不知道它是否適用於您的“專有HTML> PDF渲染器”。

li {
    overflow: hidden;
    margin: 8px 0
}
li label {
    float: left;
    margin-right: 3px
}
li span {
    display: block;
    overflow: hidden;
    border-bottom: 2px solid #000;
    line-height: 1.1
}