display in line?

**fredep57** · May 16, 2011 18:55

My input form (SACCC Form has the center section (Event Date/Time). I would like to put the Month, Day and Year inline instead of stacked as it is now.

I tried various techniques, but nothing is doing what I want. I need to figure this out.

Any suggestions would help.

P.S. Not sure how to validate a PHP file so not sure how "clean" it is.

F

**ralph.m** · May 16, 2011 19:15

You don't really have enough room for that in the current layout.

Still, the basic way to do it would be to remove this:

Code:

label {
  display: block;
}

and, assuming you want them all together in one lone row, also this:

Code:

fieldset li {
  padding-bottom: 0.5em;
  float: left;
}

**fredep57** · May 16, 2011 20:03

Tried this but it did not work.

I don't want all of the fieldsets to do this, just the middle one.

F

**ralph.m** · May 16, 2011 20:24

Put a special class on it then.

Code:

<fieldset class="middle">

Code:

.middle label {
  display: block;
}

and, assuming you want them all together in one lone row, also this:

Code:

fieldset.middle li {
  padding-bottom: 0.5em;
  float: left;
}

OK, there will be a better word than middle, but you get the idea.

**Paul O'B** · May 17, 2011 01:50

To align form controls and labels its best to use inline-block rather than floating as you can control each line more easily plus they vertically align correctly also.

Here's a basic example.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.formtest {
    width:350px;
    margin:auto;
}
.formtest label {
    display:inline-block;
    vertical-align:middle;
    width:90px;
    text-align:right;
    margin:10px 0;
}
.formtest input {
    width:200px;
    margin:10px 0;
    vertical-align:middle;
}
</style>
</head>
<body>
<form  class="formtest" id="form1" method="post" action="">
    <fieldset>
    <legend>Address Details</legend>
    <label for="firstname">First Name:</label>
    <input type="text" name="firstname" id="firstname" />
    <br />
    <label for="lastname">Last Name:</label>
    <input type="text" name="lastname" id="lastname" />
    <br />
    <label for="address1">Address 1:</label>
    <input type="text" name="address1" id="address1" />
    <br />
    <label for="address2">Address 2:</label>
    <input type="text" name="address2" id="address2" />
    <br />
    <label for="address3">Address  3:</label>
    <input type="text" name="address3" id="address3" />
    <br />
    <label for="address4">Address 4:</label>
    <input type="text" name="address4" id="address4" />
    <br />
    <label for="city">City:</label>
    <input type="text" name="City" id="city" />
    <br />
    <label for="state">State:</label>
    <input type="text" name="state" id="state" />
    <br />
    <label class="zip" for="zip">Zip:</label>
    <input type="text" name="zip" id="zip" />
    <br />
    <label for="tel">Telephone:</label>
    <input type="text" name="tel" id="tel" />
    <br />
    </fieldset>
</form>
</body>
</html>

User Tag List

Thread: display in line?

Thread Tools

Display

display in line?

Bookmarks

Bookmarks

Posting Permissions