css – 标签之间的差距 – 为什么？

< 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>​

解决方法

它是由空白引起的.改成

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

你会发现差距消失了.

如果你真的想让你的线条分开,你可以使用评论,如下所示,或移动结束标签的>：

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

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