Question

我正在创建一个MVC 1.0表单以在多个视图中使用。我有一些元素需要在同一行显示，我通过将显示设置为样式的“display：inline”来完成此操作。我还在CSS中添加了margin-left设置，以强制内联元素之间的间隙，但这似乎没有设置。

我的CSS有：

fieldset label.inline { 显示：内联; margin-left：2em; }

视图代码为：

<fieldset>
    <legend>Details</legend>
    <p>
        <label for="StartTime">Start Time:</label>
        <%= Html.TextBox("StartTime", Model.StartTime.ToShortTimeString())%>
        <label for="NextDay" class="inline">Next Day?</label>
        <%= Html.CheckBox("NextDay") %>
        <%= Html.ValidationMessage("StartTime", "*")%>
    </p>
</fieldset>

以“margin-left”样式设置大小对StartTime控件和NextDay标签之间的空间没有影响。如何在元素之间创建这种差距？

Answer 1

使用display：inline-block;

Answer 2

您正在测试哪种浏览器？

如果您使用的是Firefox，请使用Firebug扩展程序。使用指针工具选择一个元素，然后使用“布局”选项卡查看框模型。这将显示正在应用的填充，边框和边距。如果您发布正在生成的HTML以及正在计算的框模型属性，您可能会得到更好的答案。

Answer 3

“margin”样式对于内联元素的工作方式不同。您可以使用“内联块”显示模式：

fieldset label.inline { display: inline-block; margin-left: 2em; }

如何设置CSS中内联元素之间的差距大小？

3 个答案: