How can I create this simple form example in HTML? - html

Question

I'm a developer with limited HTML/CSS design experience. I have been stuck trying to create this simple form for over an hour so I'm giving up and asking for help.
I tried doing something like this:
<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;
}
I have no idea how I can express that I want the span to take up 100% of the width between the label and the containing div.
I would like the rendered HTML to look exactly like my example image. That is, the entire list item should not be underlined, only the space where the customer is to fill in the information.
Please let me know how I can achieve this. Thank you!!!

Answer 1

Here's a simple example of what you want to do. Basically, you give the li a bottom border, and overlap it with the label's border to cover up the black line.
li
{
border-bottom: 1px solid black;
width: 250px;
}
label
{
border-bottom: 2px solid white;
padding-right: 5px;
}
I'm not sure how cross browser the above solution is, so you might want to use a few extra directives, just in case (untested):
li
{
border-bottom: 1px solid black;
width: 250px;
}
label
{
background: white;
position: relative;
border-bottom: 2px solid white;
padding-right: 5px;
}
Cross browser solution (as far as I can tell):
Thanks to #Joseph, there's this solution to a thin line being displayed under the label.

Answer 2

OK I really hate answering my own question but this seems like the least-hackish way of achieving this result. I'll let the votes decide. Thanks again for all the help. I can't believe how long it took me to figure this out!
Solution using 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 3

EDIT
meh... I like my adaptation of JamWaffles' answer better (comments). He should get the credit. :P
Demo
Here's a very hackish way of doing it :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 4

add a class to the span that you want to have a border-bottom
example
li span.underline {
display: inline-block;
width: 100%;
border-bottom: 1px solid #000;
}

Answer 5

Interesting concept. I'd tackle it something like this:
<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 />
Edit This is code for a functional form that you can TYPE things into, I didn't realize you just wanted the underline. Either way, this solution should work for both.

Answer 6

Here's a solution:
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

For future reference, this is another way to do it: http://jsfiddle.net/thirtydot/7SFDV/.
The only real difference this has (over your answer) is that it will work in IE7, which is probably not relevant to you. I have no idea if it will work with your "proprietary HTML > PDF renderer".
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
}