CSS將表格單元格和整個頁面之間的間距調整爲一個

所以我用CSS來調節頁面上所有輸入類型的大小。但是我仍然注意到一些在長度方面沒有受到規範。我使用的CSS是這樣的：CSS將表格單元格和整個頁面之間的間距調整爲一個

.leftRightBorder select, 
.leftRightBorder textarea, 
.leftRightBorder input[type=text] 
{ 
    width: 150px; 
}

下面是使用上述CSS一個頁面的圖片： enter image description here

正如你可以看到仍然有一些小的長度問題。但我的主要問題是，每個組件上的「付款日」和「滾動日」字段都位於同一個表格單元格中，因此即使我在它們之間放置了一個
，間距也不等於其他所有元素之間的垂直間距這一頁。我如何規定頁面上所有內容的垂直間距？

編輯：

下面是ASP.NET代碼：

<tr id="tr63"> 
         <td id="td64"> 
          Payment Day 
         </td> 
         <td id="td65" class="leftRightBorder"> 
          <%= Html.DropDownListFor(m => m.FixedComponent.PaymentDay, DropDownData.DaysOfMonthList(), "", new { propertyName = "FixedComponent.PaymentDay", onchange = "UpdateField(this);" })%> 
          <%= Html.DropDownListFor(m => m.FixedComponent.PaymentBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "FixedComponent.PaymentBusinessDayConvention", onchange = "UpdateField(this);" })%> 
         </td> 
         <td id="td66" /> 
         <td id="td67"> 
          Payment Day 
         </td> 
         <td id="td68" class="leftRightBorder"> 
          <%= Html.DropDownListFor(m => m.FloatingComponent.PaymentDay, DropDownData.DaysOfMonthList(), "", new { propertyName = "FloatingComponent.PaymentDay", onchange = "UpdateField(this);", disabled="disabled" })%> 
          <%= Html.DropDownListFor(m => m.FloatingComponent.PaymentBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "FloatingComponent.PaymentBusinessDayConvention", onchange = "UpdateField(this);", disabled="disabled" })%> 
         </td> 
        </tr>

我想要的HTML助手之間的間距等於一切的頁面上的其他人之間的間距。希望這可以幫助。

來源

2011-01-26 slandau

嘗試調整邊距而不是填充。 input{margin-bottom: 5px;}填充是在邊框內部，邊緣在邊框之外。

來源

2011-01-26 22:26:34 DwB

如果你可以發佈html的話，這會很有幫助。您可以使用的一種方法是在字段中添加填充。發生的事情是，你有一個不可見的表格邊界，在你所有的其他字段之間創建空間（我認爲）。然後，當您在同一個表格字段中有兩個表單字段時，您沒有邊框。

最簡單的解決方案是讓他們分開的領域。如果您需要在兩個字段之間浮動，則可以將「滾動日」字段rowspan =「2」。或者你可以添加一條線到你的css中，例如：

input{margin-bottom: 2px;}

這當然會影響任何輸入，並且可能不是最佳路線。

來源

2011-01-26 22:15:30 dmcnelis

當我添加填充時，它實際上放大了ACTUAL輸入下拉菜單，而不僅僅是將空間放在其下面。 – slandau 2011-01-26 22:20:49

CSS將表格單元格和整個頁面之間的間距調整爲一個

回答

相關問題