I'm creating a HTML form, and I'm using UL's and LI's to organize my fields.
Inside each LI i have a label and a Input. After some CSS to make LI display:inline-block, I get this result:
I have the example in this fiddle: https://jsfiddle.net/cygv07px/
The question is that I want that the street field to be in a new line, like this:
I achievied that by putting a <br /> element between the <LI>, but that doesn't seems to be a elegant solution, and I keep getting validation messages from Visual Studio, saying that I cant have a BR element inside a LI.
How can i specify a line break before Street Field (or after the name field) in a better way?
Use float:left and clear it for every odd child.
li {
list-style: none;
float: left;
}
label { display: block }
li:nth-child(odd) { clear: left;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li {
list-style: none;
float: left;
}
label { display: block }
li:nth-child(odd) { clear: left; }
</style>
</head>
<body>
<ul>
<li>
<label for="docNo">Doc Number</label>
<input type="text" id="docNo" />
</li>
<li>
<label for="name">Name</label>
<input type="text" id="name" />
</li>
<li>
<label for="street">Street</label>
<input type="text" id="street" />
</li>
<li>
<label for="houseNumber">House Number</label>
<input type="text" id="houseNumber" />
</li>
</ul>
</body>
</html>
One option is to use display block and floats.
li {
list-style: none;
display: block;
float: left;
margin: 0 1rem 1rem 0;
}
li:nth-child(odd) {
clear: left;
}
label { display: block }
<ul>
<li>
<label for="docNo">Doc Number</label>
<input type="text" id="docNo" />
</li>
<li>
<label for="name">Name</label>
<input type="text" id="name" />
</li>
<li>
<label for="street">Street</label>
<input type="text" id="street" />
</li>
<li>
<label for="houseNumber">House Number</label>
<input type="text" id="houseNumber" />
</li>
</ul>
I have a slightly different solution. When you use an HTML <table> element, you don't even need any CSS to format it. It also avoids float which in my experience can cause issues. My code is below or at https://jsfiddle.net/9myL5rbk/.
label {
display: block;
}
<table>
<tr>
<td>
<label for="docNo">Doc Number</label>
<input type="text" id="docNo" />
</td>
<td>
<label for="name">Name</label>
<input type="text" id="name" />
</td>
</tr>
<tr>
<td>
<label for="street">Street</label>
<input type="text" id="street" />
</td>
<td>
<label for="houseNumber">House Number</label>
<input type="text" id="houseNumber" />
</td>
</tr>
</table>
the previous solutions didn't work for me as I had some classes already set in my framework and I got weird resoluts, so I got a ver easy and simple solution!
If you have and ul displayed horizontaly and want to get a br: just add an extra 'empty' li with a 100% width, so it won't be displayed but it will produce a break line!
ul {
list-style-type: none;
}
li {
float: left;
padding-right: 20px;
}
<ul>
<li>your li element </li>
<li>your li element </li>
<li style="width: 100%;"></li>
<li>your li element </li>
<li>your li element </li>
</ul>
At some point I read that one should avoid float whenever possible as it breaks alot of other things you can potentially do with that element.
I think a flex-box based solution might be better.
Note that the container is not needed. I just used it to simulate the list having some finite space on the page.
label {
display: block;
}
ul {
display:flex;
flex-flow: wrap;
}
li {
list-style: none;
margin: 0;
padding: 0;
width: 50%;
}
.container {
width: 25rem;
margin: 1rem auto;
}
<div class="container">
<ul>
<li>
<label for="docNo">Doc Number</label>
<input type="text" id="docNo" />
</li>
<li>
<label for="name">Name</label>
<input type="text" id="name" />
</li>
<li>
<label for="street">Street</label>
<input type="text" id="street" />
</li>
<li>
<label for="houseNumber">House Number</label>
<input type="text" id="houseNumber" />
</li>
</ul>
</div>
Related
I was wondering whether there is a better way (more dynamic) way of left aligning the title with the input boxes below it using flexbox. The input boxes need to be displayed inline with the title above them. Currently I've had to wrap a div around both the title and input boxes and set a fixed pixel width. Is there a better way of achieving the same result with flexbox?
I've tried using inline-flex on this wrapper but it's still treating it as a full width element instead of being as wide as its content. I've also tried setting inline-flex on the unordered list and the result is exactly the same.
I would like to not have to set a fixed pixel width. The next time if I need to do the same but with a different element, I would need to keep setting a fixed pixel size which isn't ideal.
Thanks in advance
html {
font-size: 14px;
}
.section {
padding: 1.5rem;
}
.wrapper {
display: flex;
background: lightblue;
}
.warning-percentage-wrapper {
background: lightcoral;
flex: 0 0 30%;
}
.warning-percentage {
display: inline-flex;
margin-left: -1rem;
}
.warning-percentage li {
flex: 0 1 80px;
margin-left: 1rem;
}
.days-of-week-wrapper {
background: lightseagreen;
flex: 1;
display: flex;
justify-content: flex-end;
}
.inline-wrapper {
background: pink;
display: flex;
flex-direction: column;
flex: 0 1 644px;
}
.days-of-week {
display: inline-flex;
margin-left: -1rem;
}
.days-of-week li {
flex: 0 1 80px;
margin-left: 1rem;
}
<section class="section">
<div class="wrapper">
<div class="warning-percentage-wrapper">
<h5 class="title is-5">Warning Percentages</h5>
<ul class="warning-percentage">
<li>
<label class="label">Low</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Medium</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">High</label>
<input class="input" type="text" readonly>
</li>
</ul>
</div>
<div class="days-of-week-wrapper">
<div class="inline-wrapper">
<h5 class="title is-5">Days of Week</h5>
<ul class="days-of-week">
<li>
<label class="label">Monday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Tuesday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Wednesday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Thursday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Friday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Saturday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Sunday</label>
<input class="input" type="text" readonly>
</li>
</ul>
</div>
</div>
</div>
</section>
if you want something as same as the pic you put in your question, you must remove padding/margin from your elements (such as input, label)
html {
font-size: 14px;
}
.wrapper {
display: flex;
background: lightblue;
}
.warning-percentage-wrapper {
background: lightcoral;
}
.warning-percentage {
display: inline-flex;
}
.warning-percentage li {
flex: 0 1 80px;
margin-left: 1rem;
}
.days-of-week-wrapper {
background: lightseagreen;
flex: 1;
display: flex;
justify-content: flex-end;
}
.inline-wrapper {
background: pink;
display: flex;
flex-direction: column;
}
.days-of-week {
display: inline-flex;
}
<section class="section">
<div class="wrapper">
<div class="warning-percentage-wrapper">
<h5 class="title is-5">Warning Percentages</h5>
<ul class="warning-percentage">
<li>
<label class="label">Low</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Medium</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">High</label>
<input class="input" type="text" readonly>
</li>
</ul>
</div>
<div class="days-of-week-wrapper">
<div class="inline-wrapper">
<h5 class="title is-5">Days of Week</h5>
<ul class="days-of-week">
<li>
<label class="label">Monday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Tuesday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Wednesday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Thursday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Friday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Saturday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Sunday</label>
<input class="input" type="text" readonly>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- end snippet -->
The problem I'm having with inline-flex is caused using a flex basis with a pixel value. I needed the inputs to all be the same width. I forgot to mention I am using Bulma (not by choice) which removes all the margins and padding's from elements by default.
My example below should hopefully provide a better understanding of the problem. Notice I've set the UL - 'days-of-week' to align-self. Now the UL is as wide a its content which is what I wanted. However if you hover over the element with your dev tools there's still quite a bit of space remaining. This is because I'm using a flex-basis with a pixel value. If you set to LI to flex: 1 and inspect the DOM, the elements are nicely fill the space, including the margins.
The solution for this is to remove the flex styles altogether on the LI elements and set a fixed pixel width on the 'inline-wrapper' element. I don't think this is ideal but it allows you to control the size of the LI's without needing additional css styling on the LI's themselves.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="bulma-0.8.0/css/bulma.min.css" rel="stylesheet" />
<style>
html {
font-size: 14px;
}
.section {
padding: 1.5rem;
}
.wrapper {
display: flex;
background: lightblue;
}
.warning-percentage-wrapper {
background: lightcoral;
flex: 0 0 30%;
}
.warning-percentage {
display: inline-flex;
margin-left: -1rem;
}
.warning-percentage li {
flex: 0 1 80px;
margin-left: 1rem;
}
.days-of-week-wrapper {
background: lightseagreen;
flex: 1;
display: flex;
justify-content: flex-end;
}
.inline-wrapper {
background: pink;
display: flex;
flex-direction: column;
flex: 0 1 644px;
}
.days-of-week {
display: inline-flex;
align-self: flex-start;
}
.days-of-week li {
flex: 0 1 80px;
margin-left: 1rem;
}
.days-of-week li:first-child {
margin-left: 0;
}
</style>
</head>
<body>
<section class="section">
<div class="wrapper">
<div class="warning-percentage-wrapper">
<h5 class="title is-5">Warning Percentages</h5>
<ul class="warning-percentage">
<li>
<label class="label">Low</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Medium</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">High</label>
<input class="input" type="text" readonly>
</li>
</ul>
</div>
<div class="days-of-week-wrapper">
<div class="inline-wrapper">
<h5 class="title is-5">Days of Week</h5>
<ul class="days-of-week">
<li>
<label class="label">Monday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Tuesday</label>
<input class="input" type="text" readonly>
</li>
<li>
<label class="label">Wednesday</label>
<input class="input" type="text" readonly>
</li>
</ul>
</div>
</div>
</div>
</section>
</body>
</html>
Bear with me as I'm not well versed with front end design. How can I get the following checkboxes aligned and stacked neatly as in the picture?
Right now I have them in a row of 9 checkboxes but they're not aligned and are spaced according to the length of the text.
As seen here:
JSFiddle
HTML:
<div class="tags">
<div class="col">
<label>
<input type="checkbox" rel="accounting" />Accounting</label>
<label>
<input type="checkbox" rel="courier" />Courier</label>
<label>
<input type="checkbox" rel="project-management" />Project Management</label>
<label>
<input type="checkbox" rel="video-games" />Video Games</label>
<label>
<input type="checkbox" rel="dentistry" />Dentistry</label>
<label>
<input type="checkbox" rel="librarian" />Librarian</label>
<label>
<input type="checkbox" rel="programmer" />Programmer</label>
<label>
<input type="checkbox" rel="architect" />Architect</label>
</div>
<div class="col">
<label>
<input type="checkbox" rel="photographer" />Photographer</label>
<label>
<input type="checkbox" rel="it" />IT</label>
<label>
<input type="checkbox" rel="artist" />Artist</label>
<label>
<input type="checkbox" rel="web-developer" />Web Developer</label>
<label>
<input type="checkbox" rel="web-designer" />Web Designer</label>
<label>
<input type="checkbox" rel="neurologist" />Neurologist</label>
<label>
<input type="checkbox" rel="veterinarian" />Veterinarian</label>
<label>
<input type="checkbox" rel="teacher" />Teacher</label>
</div>
<div class="col">
<label>
<input type="checkbox" rel="character-animator" />Character Animator</label>
<label>
<input type="checkbox" rel="salesman" />Salesman</label>
<label>
<input type="checkbox" rel="telemarketing" />Telemarketeing</label>
<label>
<input type="checkbox" rel="construction" />Construction</label>
<label>
<input type="checkbox" rel="lawyer" />Lawyer</label>
<label>
<input type="checkbox" rel="actor" />Actor</label>
<label>
<input type="checkbox" rel="policeman" />Policeman</label>
<label>
<input type="checkbox" rel="forestry" />Forestry</label>
</div>
</div>
<!-- end tags -->
CSS:
.filter {
width: 850px;
padding: 25px;
border: 1px solid black;
margin: 25px;
float: left;
}
.col {
width: 100%;
display: block;
margin-right: 10px;
}
label{
vertical-align: top;
float: left;
width: 160px;
}
Edit
I'd use a table layout. Simply add the following CSS:
.tags {
display: table;
}
.col {
display: table-row;
}
.col label {
display: table-cell;
}
Updated fiddle: http://jsfiddle.net/5sz6qdos/13/
Others might use flexbox but I have never used it myself, so not sure how to implement that.
I would probably go a different route, however, to make it more semantic and setup to be more flexible:
<ul class="tags">
<li class="tag"><label>...
....<!--put ALL of your label elements in a single parent element-->
</ul>
and
.tag {
display: block;
float: left;
width: 25%; /*for if you want 4 columns, or*/
width: 120px; /*if you want specific widths*/
}
.tags:after { content: ""; display: table; clear: both; } /*clearfix*/
Using percentages will flex all the columns, or using fixed pixels will allow the elements to flow (my preference).
first of all change your html code like that:
<input type="checkbox" name="accounting" id="accounting" rel="accounting" />
<label for="accounting">Accounting</label>
Do this for every checkbox.
Then Do the follwoing css
.tags{clear:both}
.col{float:left;width:120px;/*adjust your width */}
.col lable, .col input{display:inline-block;}
.col label{width:120px;/*adjust your width */}
.col input{width:20px;/*adjust your width */}
For starters, you're using the label tag wrong. They should not have an input inside them. And how I would do what you're trying to do is something like this:
<div class="col">
<label>Job</label>
<input>
<label>Job</label>
<input>
</div>
<div class="col">
<label>Job</label>
<input>
<label>Job</label>
<input>
</div>
Then in your CSS...
.col {
display: inline-block;
width: 33.3%;
vertical-align: top;}
label {
display: inline-block;
width: 100px;}
input {
display: inline-block;
width: calc(100% - 100px);}
To make sure the columns, labels, and inputs all touch nicely, you have to remove the whitespace. You can either remove it from the code itself, connect elements with comment tags, or set the font-size to 0 on the container. And it wouldn't hurt to throw this in your CSS:
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;}
So you're kinda having the same problem I mentioned belwo... the text can't be what you're basing off of. You have to set an actual width.
http://jsfiddle.net/tueez7bx/6/
This works, but extends past your limits. You should really consider my other options I provide below.
Also, you can't use ids the way you are. That is incorrect. You'll need to change all the #col to .col.
Second Edit
So based on a comment provided below I have come to realize the goal of what you're trying. Sadly because of the flexibility of text and items you would need to have defined widths for each to line up perfectly. If you don't know what the longest string will be then you will have a problem with risking that string breaking below the words or running into the next checkbox.
You can see that here: http://jsfiddle.net/5sz6qdos/22/
However.. if you extend the width of your container and just have a greater width you will be able to avoid this...
You can see what I am imagining you're asking here: http://jsfiddle.net/5sz6qdos/28/
Before Edit
You're doing well overall...
http://jsfiddle.net/5sz6qdos/3/
.col {
width: 160px;
float: left;
margin-right: 10px;
}
label{
display: block;
}
This does define a width and doesn't allow for full flexibility. It does however give you the option of going to responsive layouts with this data.
To get the boxes the way you want them you cannot use pure CSS. You will need a mix of Javascript. Checkboxes themselves can not be edited with CSS directly. You will need to hide the checkbox with display: none and add an image for the boxes themselves. Once you have done this you will need to use jQuery to check and uncheck each box. That is the only way to get the exact look.
SO has a lot of answers out there for the jQuery part.
Thanks to all for the knowledge and push in the right direction.
Here is the working solution I found while setting line widths.
JSFiddle
HTML
<div class="filter">
<h3 style="text-align: center;">Blog Profession Filters</h3>
<ul class="checkbox">
<li>
<input type="checkbox" id="cb1" rel="accounting" value="accounting" />
<label for="cb1">Accounting</label>
</li>
<li>
<input type="checkbox" id="cb2" rel="project-management" value="project-management" />
<label for="cb2">Project Management</label>
</li>
<li>
<input type="checkbox" id="cb3" rel="information technology" value="information-technology" />
<label for="cb3">Information Technology</label>
</li>
<li>
<input type="checkbox" id="cb4" rel="courier" value="courier" />
<label for="cb4">Courier</label>
</li>
<li>
<input type="checkbox" id="cb5" rel="video-games" value="video-games" />
<label for="cb5">Video Games</label>
</li>
<li>
<input type="checkbox" id="cb6" rel="web-development" value="web-development" />
<label for="cb6>">Web Development</label>
</li>
<li>
<input type="checkbox" id="cb7" rel="veterinarian" value="veterinarian" />
<label for="cb6>">Veterinarian</label>
</li>
<li>
<input type="checkbox" id="cb8" rel="web-designer" value="web-designer" />
<label for="cb6>">Web Designer</label>
</li>
<li>
<input type="checkbox" id="cb9" rel="attorney" value="attorney" />
<label for="cb9>">Attorney</label>
</li>
<li>
<input type="checkbox" id="cb10" rel="medical-practitioner" value="medical-practitioner" />
<label for="cb10>">Medical Practitioner</label>
</li>
<li>
<input type="checkbox" id="cb11" rel="telemarketing" value="telemarketing" />
<label for="cb11>">Telemarketing</label>
</li>
<li>
<input type="checkbox" id="cb12" rel="construction" value="construction" />
<label for="cb12>">Construction</label>
</li>
</ul>
</div>
<div id="results">
<ul class="results">
<li class="accounting" style="list-style-type:none"> Accounting
</li>
<li class="project-management" style="list-style-type:none"> Game QA Project Management
</li>
<li class="information-technology" style="list-style-type:none"> Information Technology
</li>
<li class="courier" style="list-style-type:none"> Courier / Parcel Delivery
</li>
<li class="video-games" style="list-style-type:none"> Video Games
</li>
<li class="web-development" style="list-style-type:none"> Web Development
</li>
<li class="veterinarian" style="list-style-type:none"> Veterinarian
</li>
<li class="web-designer" style="list-style-type:none"> Wed Designer
</li>
<li class="attorney" style="list-style-type:none"> Attorney
</li>
<li class="medical-practitioner" style="list-style-type:none"> Medical Practitioner
</li>
<li class="telemarketing" style="list-style-type:none"> Telemarketing
</li>
<li class="construction" style="list-style-type:none"> Construction
</li>
</ul>
</div>
CSS
.filter {
width: 850px;
padding: 25px;
border: 1px solid black;
margin: 25px;
}
ul.checkbox {
margin: 0;
padding: 0;
margin-left: 20px;
list-style: none;
}
ul.checkbox li input {
margin-right: .25em;
}
ul.checkbox li {
border: 1px transparent solid;
display:inline-block;
width:12em;
}
ul.checkbox li label {
margin-left:;
}
ul.checkbox li:hover, ul.checkbox li.focus {
background-color: lightyellow;
border: 1px gray solid;
width: 12em;
}
.results {
width: 850px;
padding: 25px;
border: 1px solid black;
margin: 25px;
}
I'm trying to achieve the following result:
Email Password
[Email box] [Password Box] [Log In]
[]keep me logged in Forgot Password?
I've been successful in implementing the first two lines (Email ... [Log In]) but can't shape the last line.
Here's the code.
<ul>
<li>
<label for="mail">Email: </label><br>
<input type="email" name="mail" /><br>
<input type="checkbox" name="stayLoggedIn" />
<small>Keep me signed in</small>
</li>
<li>
<label for="paswrd">Password: </label><br>
<input type="password" name="paswrd" /><br>
<small>Forgot Password?</small>
</li>
<li><button type="button" name="login">Log In</button></li><br><p> </p>
</ul>
The CSS code is as follows.
header ul {float: right;}
header ul li {
display: inline-block;
color: #FFEBCD;
font-family: "Maiandra GD";
}
header small {float: right;}
You will need to do this with two div's one float to the left the second float to the right
see an example
<div class="left_div">
<label for="mail">Email: </label><br>
<input type="email" name="mail" /><br>
<input type="checkbox" name="stayLoggedIn" />
<small>Keep me signed in</small>
</div>
<div class="right_div">
<label for="paswrd">Password: </label><br>
<input type="password" name="paswrd" /><br>
<small>Forgot Password?</small>
</div>
The CSS code
.left_div {
float: left;
width: 300px;
}
.right_div {
float: right;
width: 300px;
}
I have the following form in a html5 document.I am a newbie as far as html and css goes.Basically,I am trying to learn with experimenting.
<form>
<ol style="list-style:none">
<li style="display: inline">
<label for="fname">First Name</label>
<input id="fname" type="text">
</li>
<li style="display: inline">
<label for="lname">Last Name</label>
<input id="lname" type="text">
</li>
<li>
<label for="dept">Department</label>
<input id="dept" type="text">
</li>
</ol>
</form>
Coming to the challenge I am facing,
1)I need to know how I can control the spacing between the label and the input field.
2)Also the space between the two li(first name and last names).
PS:I also have a CSS file which control the font,color,input width etc.
Try the following code.
For "ol li label" (in css code) you can also use margin instead of width, to control the distance between label and input items.
<head>
<style>
ol{
margin:0;
padding:0;
}
ol li{
margin:0 0 10px 0;
}
ol li label{
width:150px;
float:left;
}
ol li input{
float:left;
}
</style>
</head>
<body>
<form>
<ol>
<li>
<label for="fname">First Name</label>
<input name="fname" type="text">
</li>
<li>
<label for="lname">Last Name</label>
<input name="lname" type="text">
</li>
<li>
<label for="dept">Department</label>
<input id="dept" type="text">
</li>
</ol>
</form>
</body>
Try using margin-bottom and margin-top on your input elements.
See here for more info on margins in css.
I am just trying to float an unordered list left, and a set of textboxes to the right so that they are adjacent to each other and have a uniform look within a div tag. The issue is that the text boxes are to the right ... but are positioned below the ul items
.PersonLI
{
float: left;
clear: both;
width: 100px;
margin-bottom: 10px;
}
.PersonBox
{
float: right;
clear: both;
width: 99px;
margin-bottom: 10px;
}
.FirstObj
{
border: 1px solid black;
margin-left: 100px;
width: 300px;
height: 200px;
}
<div class="FirstObj">
<ul style="list-style: none;">
<li class="PersonLI">First Name:</li>
<li class="PersonLI">Last Name:</li>
<li class="PersonLI">Address:</li>
<li class="PersonLI">City:</li>
<li class="PersonLI">State:</li>
<li class="PersonLI">Zip Code:</li>
</ul>
<input id="txtFname" type="text" value="" class="PersonBox"/>
<input id="txtLname" type="text" value="" class="PersonBox"/>
<input id="txtAddr" type="text" value="" class="PersonBox"/>
<input id="txtCity" type="text" value="" class="PersonBox"/>
<input id="txtState" type="text" value="" class="PersonBox"/>
<input id="txtZip" type="text" value="" class="PersonBox"/>
</div>
Could it be that I need to NOT clear the float on the last list item?
Your markup is kind of weird. A semantic form adapting your styles would look like this:
.FirstObj ul {
list-style: none;
}
.FirstObj li {
margin-bottom: 10px;
clear: both;
}
.FirstObj label {
width: 100px;
float: left;
}
.FirstObj input {
float: right;
width: 99px
}
<div class="FirstObj">
<ul>
<li>
<label for="txtFname">First Name:</label>
<input id="txtFname" type="text" value="" />
</li><li>
<label for="txtLname">Last Name:</label>
<input id="txtLname" type="text" value="" />
</li><li>
<label for="txtAddr">Address:</label>
<input id="txtAddr" type="text" value="" />
</li><li>
<label for="txtCity">City:</label>
<input id="txtCity" type="text" value="" />
</li><li>
<label for="txtState">State:</label>
<input id="txtState" type="text" value="" />
</li><li>
<label for="txtZip">Zip Code:</label>
<input id="txtZip" type="text" value="" />
</li>
</ul>
</div>
It's alway a good idea to use labels. Here's the working version: http://jsfiddle.net/Fmzbm/
Is there any specific reason why you are not using <label> tags for these fields?
To answer your CSS question, clear:both is not needed on either of the elements if you want them side by side.
Consider changing your markup:
HTML:
First Name:
CSS:
.FirstObj label { float:left; }
.FirstObj input { float:right; }
The code hinting is jacked up, need to try some more formatting.
Demo http://jsfiddle.net/qnev2/
You may want to change the fixed width of the li CSS rule to suit your needs but also change the markup and use the more semantically correct label tag. This also avoids the float property which in my experience can lead to undesirable behaviour if the HTML is re-flowed.