标签和<select>之间的差距 - 为什么？

Question

<label>Title</label>和<select>字段之间有一个小的差距,我无法弄清楚是什么原因造成的？

访问http://jsfiddle.net/xrvbv/6/,您会发现<select>没有正确对齐.

CSS:

.FormStyle label {
 display: inline-block; 
 width: 130px;
 text-align: right;
 padding-right: 7px;
 font-size: 11px;
 color: #666;
 font-weight: bold;
}

.FormStyle input[type="text"], .FormStyle textarea {
 padding: 3px;
 display: inline-block;
 width: 290px;
 border: 1px solid #BDC7D8;
 border-image: initial;
 margin: 0px;
 font-size: 12px;
}


.FormStyle li {
 padding: 3px;
 margin-bottom: 1px;
}


.FormStyle {
 margin: 5px 0px 0px;
 padding: 0px 0px 10px;
 list-style-type: none;
 border-bottom: 1px solid #E5E5E5;
}?

HTML

<ul class="FormStyle">
    <li>
        <label>First Name</label><input type="text" value="" name="firstname">    
    </li>

    <li>
        <label>Second Name</label><input type="text" value="" name="secondname">    
    </li>
    <li>
       <label>Title</label>
        <select name="title">
            <option> Mr </option>
            <option> Mrs </option>
            <option> Ms </option>
            <option> Miss </option>
            <option> Dr </option>
        </select>
    </li>
</ul>?

Answer 1

它是由空白引起的.改成

<label>Title</label><select name="title">

你会发现差距消失了.

如果你真的想让你的线分开,你可以使用注释,如下所示,或移动结束标签>:

   <label>Title</label
        ><select name="title">

我不认为任何一种解决方案都是好的,而你只是浪费带宽发送你不想要或不需要的空白.