对齐标签和输入(浮动与显示内联块)

Question

我有一个标签和文本字段的两个例子,我试图对齐(你可以在这个小提琴中看到它).在第一个例子中,我有一个标签和一个文本字段,如下所示:

<label for="firstname" style="width:100px;display:inline-block;background-color:red;">Firstname: </label>
<input type="text" style="margin:0;padding:0;" id="firstname" name="firstname" value="" />

在第二个例子中,我在div中有一个标签和三个浮动文本字段,如下所示:

<div>
    <div style="width:100px;float:left;background-color:red;">Date: </div>
    <div>
        <div style="float:left;">
            <input type="text" style="margin:0;padding:0;" id="day" name="day" maxlength="2" size="2" value="" /> / <br />
            <label for="day">Day</label>
        </div>          
        <div style="float:left;">               
            <input type="text" style="margin:0;padding:0;" id="month" name="month" maxlength="2" size="2" value="" /> / <br />
            <label for="month">Month</label>
        </div>          
        <div style="float:left;">
            <input type="text" style="margin:0;padding:0;" id="year" name="year" maxlength="4" size="4" value="" /><br />
            <label for="year">Year</label>
        </div>
    </div>      
</div>

如上所示,我给每个标签的宽度为100px,但由于某种原因,在第二个示例中,我的标签和第一个文本字段之间没有空格.有没有人知道为什么会这样,为什么我的宽度100px似乎没有任何影响我的第二个例子(查看上面的小提琴链接).

谢谢

Answer 1

您可以使用inline-block而不是float使其显示为上一部分以获得边距效果,否则您需要使用浮动元素添加边距.

<div style="width:100px;display:inline-block;vertical-align:top;background-color:red;">Date: </div>
        <div style="display:inline-block;">
            <div style="display:inline-block;">
                <input type="text" style="margin:0;padding:0;" id="day" name="day" maxlength="2" size="2" value="" /> / <br />
                <label for="day">Day</label>
            </div>          
            <div style="display:inline-block;">             
                <input type="text" style="margin:0;padding:0;" id="month" name="month" maxlength="2" size="2" value="" /> / <br />
                <label for="month">Month</label>
            </div>          
            <div style="display:inline-block;">
                <input type="text" style="margin:0;padding:0;" id="year" name="year" maxlength="4" size="4" value="" /><br />
                <label for="year">Year</label>
            </div>
        </div>      

演示

或者添加保证金.

<div style="width:100px;float:left;margin-right:4px;background-color:red;">Date: </div>

演示

另外,请考虑使用css规则而不是内联样式