将选择框与css对齐

Question

我无法在css中调整我的出生日期选择下降。它没有排成一行。

这是我到目前为止所得到的。

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;
}

这是一个小提琴 - http://fiddle.jshell.net/kMVWw/5/

Answer 1

Demo Fiddle

问题是你使用了浮动块元素。

将CSS更改为：

  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;
  }

Answer 2

检查这个小提琴 http://fiddle.jshell.net/kMVWw/6/

为特定的display: inline元素添加了select。