Question

我想在不使用换行符的情况下增加两个文本框之间的空间。我已经创建了CSS规则，但在显示页面时没有效果。

这些是文本框

<asp:Label ID="Discount" CssClass="textboxcontainer" runat="server" Text="Discount: "></asp:Label><asp:TextBox ID="TextBoxDiscount" runat="server"></asp:TextBox><br />
    <asp:Label ID="TotalAfterDis" CssClass="textboxcontainer" runat="server" Text="Total : "></asp:Label><asp:TextBox ID="TextBoxTotal" runat="server"></asp:TextBox> <br />

我在CSS文件中有这个CSS规则

div#page  .textboxcontainer{
    margin: 10px auto;

非常感谢任何帮助

Answer 1

margin不适用于asp:label，因为asp:label会呈现为span，这是一个inline元素

尝试将display:inline-block添加到您的css规则中。

Answer 2

您的<asp:Label>将呈现为HTML span，默认情况下显示inline，导致忽略顶部和底部margin。将display: block或display: inline-block添加到您的.textboxcontainer规则中。

Answer 3

ASP Label控件在运行时在<span>标记中呈现。这就是给你带来麻烦的东西。只需将标签和文本框控件包装在自己的div中，您就可以获得该块分隔。在该div中添加一个类并给它一个margin-bottom：XXpx，你就在路上

         <div class="form-group">
             <asp:Label ID="Discount" CssClass="textboxcontainer" runat="server" Text="Discount: "></asp:Label>
             <asp:TextBox ID="TextBoxDiscount" runat="server"></asp:TextBox>            
         </div>
         <div class="form-group">
             <asp:Label ID="TotalAfterDis" CssClass="textboxcontainer" runat="server" Text="Total : "></asp:Label>
             <asp:TextBox ID="TextBoxTotal" runat="server"></asp:TextBox> 
         </div>

CSS

.form-group{
    margin-bottom: 10px;
}

使用CSS增加文本框之间的空间

3 个答案: