Question

我有两个标签和文本字段的示例，我正在尝试对齐（您可以在this fiddle中看到它）。在第一个例子中，我有一个标签和一个文本字段，如下所示：

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

<强> Demo

或添加保证金。

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

<强> Demo

在旁注中，请考虑使用css规则而不是内联样式

Answer 2

空格是因为第一个元素是替换的内联元素，它与内联块具有相同的行为并增加了边距。

对于宽度，请移除size="2"和maxlength="2"以使其与上输入字段相同

Answer 3

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

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

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

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

对齐标签和输入（浮动与显示内联块）

3 个答案: