1

I have two examples of a label and a text field that I'm trying to align (You can see it in this fiddle). In the first example I have a label and a text field like this:

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

In the second example, I have a label and a three floated text fields in a div like this:

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

As you can see above, I give each label a width of 100px, but for some reason, in the second example, there is no space between my label and the first text field. Does anybody know why this is happening and why my width of 100px does not seem to have any effect in my second example (view fiddle link above).

Thank you

4

3 回答 3

10

您可以使用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 规则而不是内联样式

于 2013-07-09T22:36:02.280 回答
0

首先，您使用“Firstname”标签的第一个示例是使用“label”标签，该标签的处理方式与“div”不同。这让我想到了被“div”标签包围的“Date”的第二个例子。因此，浏览器处理它们的默认方式是不同的。

您可以通过使用“div”将标签添加到标签的右边距来轻松补偿这种差异。

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

虽然可以使用内联样式，但我建议您是否要在更大的文档中使用它，将其放在外部 CSS 文件中，并为 div 使用类（或 ID）。

于 2013-07-09T22:39:43.517 回答
0

空格是因为第一个元素是替换的 inline 元素，它的行为与 inline-block 相同，并添加了边距。

对于宽度，删除size="2"并maxlength="2"使其与上部输入字段相同

于 2013-07-09T22:35:12.757 回答