CSS Block for Employee Entry Form
Hello I am creating a simple form to enter employee information. An employee has the following characteristics:
- First Name
- Last Name
- Age
- SSN
- Gender
- Race
- etc...
There are about 20 properties I want to display a label and textbox for (some have dropdowns). I don't want to use a table because I've read that using <div>
elements and CSS is better style so I want to take this opportunity to learn. Some of the fields are really wide (Address1, Address2) and others are very narrow (Mr./Mrs.).
Right now all label/input pairs are set up like this:
<div class="data-container">
<div class="data-row">
<div class="data-label>
<!-- label -->
</div>
<div class="data-input>
<!-- textbox -->
</div>
</div>
<!-- many more label/input pairs here -->
<!-- Submit --> <!-- Cancel -->
</div>
I want each 'data-row' to be on a开发者_开发知识库 separate horizontal variable-width row At the bottom there is a Submit and a Cancel button, I want those centered and on the same row.
I tried setting this CSS
.data-row
{
display: block;
clear: both;
}
.data-label,
.data-input
{
float: left;
}
But even with block display on the rows they continue to wrap around the entire container so I can't get 3 inputs on one row, then 4 on the next, and then 3 more, and so on. How can I do this properly?
I'd recommend, for simplicity, using a ul
nested within the form
element, and using simple html form elements:
<form action="" method="post">
<ul>
<li><label for="firstName">First Name:</label><input type="text" name="firstName" id="firstName" /></li>
<li><label for="familyName">Family Name:</label><input type="text" name="familyName" id="familyName" /></li>
<li><label for="age">Age:</label><input type="number" name="age" id="age" /></li>
<li><label for="ssn">SSN:</label><input type="text" name="ssn" id="ssn" /></li>
<li><label for="gender">First Name:</label><input type="radio" name="gender" value="male" />Male<input type="radio" name="gender" value="female" />Female</li>
<li><label for="streetAddress"><input type="text" id="streetAddress" name="streetAddress" /></li>
</ul>
</form>
Couple the above with the following css:
form ul {
list-style-type: none;
}
and you get the data-row
on separate horizontal variable width rows for free. I realise that it's a different html structure, but it does seem to come with benefits, including multiple input
elements on one line (so long as you don't display: block
them in your css).
try adding overflow: hidden;
.data-row
{
display: block;
clear: both;
overflow: hidden;
}
Not sure I understand the problem fully, but I think u want to be able to display multuple divs floated left within a container div. Two things you need to do in your code to get this to work: 1 - you're missing a couple of double quotes in your markup for the class names 'data-label' and 'data-input'. and 2 - add a 'display:inline' to the floated css declaration. That should do the trick.
Here's a link: http://jsfiddle.net/KMH6f/
精彩评论