CODEWITHSUNDEEP
htmlcss
user3497771
user3497771

Reputation: 41

Align select boxes in line with css

I can't align my date of birth select drop downs in the css. It's not aligning in line.

Here's what I've got so far.

HTML:

<div id="personalinfo">
    <ul>
        <li>
            <label for="salutation">Salutation</label>
            <select>
                <option></option>
            </select>
        </li>
        <li>
            <label for="lname">Last Name</label>
            <input type="text" />
        </li>
        <li>
            <label for="fname">First Name</label>
            <input type="text" />
        </li>
        <li>
            <label for="mname">Middle Name</label>
            <input type="text" />
        </li>
        <li>
            <label for="gender">Gender</label>
            <select>
                <option></option>
            </select>
        </li>
        <li>
            <label for="dob">Date of Birth</label>
            <select>
                <option></option>
            </select>M
            <select>
                <option></option>
            </select>D
            <select>
                <option></option>
            </select>Y
        </li>
        <li>
            <label for="add">Address</label>
            <input type="text" />
        </li>
        <li>
            <label for="busadd">Business Address</label>
            <input type="text" />
        </li>
    </ul>
</div>

CSS:

ul li {
    list-style: none;
}
ul li > label:after {
    content:":";
}
label {
    display: block;
    text-align: right;
    width: 200px;
    font-size: 13px;
    line-height: 16px;
    float: left;
    /*
    float: left;

   */
}
input, select {
    display: block;
    background-color: #fff;
    border: solid 1px #BBC5CE;
    margin: 0;
    padding: 5px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
#personalinfo {
    border: 1px solid black;
}

Here's a fiddle - http://fiddle.jshell.net/kMVWw/5/

Upvotes: 1

Views: 9802

Answers (2)

Narendra
Narendra

Reputation: 3117

Check this fiddle http://fiddle.jshell.net/kMVWw/6/

Added display: inline for specific select elements.

Upvotes: 0

SW4
SW4

Reputation: 71240

Demo Fiddle

The issue was you were using floated block elements.

Change your CSS to:

  ul li {
    list-style: none;
  }
  ul li > label:after, ul li > label:after {
  content: ":";
  }
  label {
    display: inline-block;
     text-align: right;
     width: 200px;
     font-size: 13px;
      line-height: 16px;
        /*
    float: left;

   */
  }
  input, select {
    display: inline-block;
    background-color: #fff;
    border: solid 1px #BBC5CE;
    margin: 0;
    padding: 5px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;

  }

  #personalinfo {
    border: 1px solid black;
  }

Upvotes: 1

Related Questions