Title: How can I create this simple form example in HTML?
Tags: html;css
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&gt;
<li&gt;<label&gt;Name:</label&gt;<span class="line"&gt;&amp;nbsp</span&gt;</li&gt;
...
</ul&gt;
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!!!

Here is the accepted answer: 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.
border-bottom: 1px solid black;
width: 250px;
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):
border-bottom: 1px solid black;
width: 250px;
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.
Comment for this answer: I know it's cheating, but giving the `li` a 1px bottom border fixes it.
Comment for this answer: No problem. The most important part is that you found an answer that works!
Comment for this answer: No problem. Teamwork: 1, stuggling with it for ages: 0. If you use PHP, there are a few libraries for messing about with PDFs.
Comment for this answer: Thanks for the reply but I think I found a cross-browser way of doing it without using over-lapping borders!
Comment for this answer: .... and the proprietary HTML > PDF renderer that I am using doesn't like the table-cell solution so I am using this and it works well. Thanks!
Comment for this answer: seems to have an issue with chrome :(
Comment for this answer: sorry... 3 comments :( but http://jsfiddle.net/ASJJw/2/ might work cross browser.

Here is another answer: 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".
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

Here is another answer: Here's a solution:
<ul&gt;
<li&gt;<span class="label"&gt;Name:</span&gt;<span class="line name"&gt;</span&gt;</li&gt;
<li&gt;<span class="label"&gt;Address:</span&gt;<span class="line address"&gt;</span&gt;</li&gt;
<li&gt;<span class="label"&gt;City:</span&gt;<span class="line city"&gt;</span&gt;</li&gt;
<li&gt;<span class="label"&gt;State:</span&gt;<span class="line state"&gt;</span&gt;</li&gt;
<li&gt;<span class="label"&gt;Zip:</span&gt;<span class="line zip"&gt;</span&gt;</li&gt;
</ul&gt;
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;}
Comment for this answer: Thanks for the reply but I really want to do this without having to set everything manually to be pixel-perfect.

Here is another answer: Interesting concept. I'd tackle it something like this:
<style type="text/css"&gt;
input.line {
border: 0;
border-bottom: 1px solid #000;
</style&gt;
<ul&gt;<li&gt;<label for="name"&gt;Name: </label&gt;<input class="line" name="name" /&gt;</li&gt;<br /&gt;
<li&gt;<label for="address"&gt;Address: </label&gt;<input class="line" name="address" /&gt;</li&gt;<br /&gt;
<li&gt;<label for="city"&gt;City: </label&gt;<input class="line" name="city" /&gt;</li&gt;<br /&gt;
<li&gt;<label for="state"&gt;State: </label&gt;<input class="line" name="state" /&gt;</li&gt;<br /&gt;
<li&gt;<label for="zip"&gt;ZIP: </label&gt;<input class="line" name="zip" /&gt;</li&gt;</ul&gt;<br /&gt;
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.
Comment for this answer: Thanks for the reply. And yes, this is actually going to be printed out so it doesn't matter if there are actual input elements or not. Anyway, I tried your example and the problem is that all the input boxes, and therefore the bottom borders, are the same width. I would like the HTML to look just like my picture example. That is, I would like the lines to go from the label and extend out to to the containing div so that the total width of each label and line is the same.

Here is another answer: 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;
Comment for this answer: How is this different than the example that I gave that didn't work?

Here is another answer: meh... I like my adaptation of JamWaffles' answer better (comments).  He should get the credit. :P
Here's a very hackish way of doing it :P
<ul&gt;
<li&gt;<label&gt;Name:</label&gt;</li&gt;
<li&gt;<label&gt;Address:</label&gt;</li&gt;
<li&gt;<label&gt;City:</label&gt;</li&gt;
<li&gt;<label&gt;State:</label&gt;</li&gt;
<li&gt;<label&gt;Zip:</label&gt;</li&gt;
</ul&gt;
li label {
margin-bottom:-1px;
display: inline-block;
border-bottom: 1px solid #fff;
padding-right:10px;
width: 100%;
border-bottom: 1px solid #000;
Comment for this answer: Nice, but why do you need the `inline-block` directives? The `label` is inline by default, and the `li`s are on separate lines regardless of how long they are.
Comment for this answer: Ah. No worries \*pulls out defibrilator\*. Also, thanks for the citation.
Comment for this answer: @JamWaffles death by copy and paste. :P  I just pasted in the code supplied by the PO so some of it is superfluous.

Here is another answer: 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&gt;
<li&gt;<label&gt;Name:</label&gt;<span&gt;</span&gt;</li&gt;
<li&gt;<label&gt;Address:</label&gt;<span&gt;</span&gt;</li&gt;
<li&gt;<label&gt;City:</label&gt;<span&gt;</span&gt;</li&gt;
<li&gt;<label&gt;State:</label&gt;<span&gt;</span&gt;</li&gt;
<li&gt;<label&gt;Zip:</label&gt;<span&gt;</span&gt;</li&gt;
</ul&gt;
Comment for this answer: Nice solution! but just as a point of interest, IE < 8 doesn't support `display:table-cell` http://www.quirksmode.org/css/display.html#t06 :S

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 7, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2011:00:09/13/11', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><css>', 'Title': 'How can I create this simple form example in HTML?', 'ViewCount': 599, 'id': 7408557, 'user_AboutMe': '', 'user_AccountId': 102380.0, 'user_DisplayName': 'Jeff Camera', 'user_Reputation': 5214.0, 'user_Views': 598.0, 'user_id': 274837.0}}