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

你会看到差距消失。

如果确实希望将您的专线分开，您可以使用评论，如下所示，或移动结束标签的＆gt;：

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

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

Answer 2

这是因为label和select之间有换行符和标签。如果您将标签放在同一行并删除标签，则间隙将消失。

↪View this at JSFiddle

HTML的一个特性是所有空白区域都被视为相同。任何序列的空格字符都被视为单个空格。

（引用途径：http://www.maproom.co.uk/invis1.htm）

为了防止在保持缩进的同时出现间隙，您可以使用以下任一技巧：

将>标记的label移至下一行。虽然这是valid HTML，但这可能令人困惑，而不是你想要的。
注释掉标记之间的空白（将其放在之间）。
这两个选项都在浪费带宽。
在服务器端编程语言的标记之间放置空格，例如<?php /*whitespace*/ ?>。这可能会导致服务器负载的低增长。

所有这些选项都令人困惑，而且可能不是你想要的，所以我建议只留下空白。

Answer 3

没有

尝试删除

padding-right: 7px;

CSS中的

这就是技巧

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

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

3 个答案: