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

我想增加兩個文本框之間的空間而不使用換行符。我創建了一個CSS規則，但它在顯示頁面時不起作用。使用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;

任何幫助，非常感謝

來源

2015-12-22 twobits

後的HTML，而不是ASP。 – j08691

@ j08691，他寫的是asp，而不是html – JNF

@JNF - ASP在這裏沒有關係。只有呈現的標記很重要。我也看不到有「page」ID的元素。 – j08691

margin不上asp:label工作，因爲asp:label是呈現爲span，這是一個inline元素

嘗試將display:inline-block添加到您的CSS規則。

來源

2015-12-22 21:42:18 JNF

您的<asp:Label>將呈現爲HTML span，默認顯示inline，導致忽略頂部和底部margin。將display: block或display: inline-block添加到您的.textboxcontainer規則中。

來源

2015-12-22 21:43:10

與其他答案有什麼不同？ – j08691

@ j08691我寫了。 –

ASP標籤控件在運行時在<span>標記中呈現。這是給你麻煩的。只需將標籤和文本框控件包裝在自己的div中，就可以獲得該塊的分離。一類添加到該分區，並給它一個邊距：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; 
}

來源

2015-12-22 21:45:24 LOTUSMS

好主意謝謝 – twobits

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

回答

相關問題