CSS将表格单元格和整个页面内的间距调节为一个答案

【问题标题】：CSS to regulate spacing within table cells and entire page as oneCSS将表格单元格和整个页面内的间距调节为一个
【发布时间】：2011-01-26 21:50:23
【问题描述】：

所以我有 CSS 来调节页面上所有输入类型的大小。但是，我仍然注意到一些在长度方面没有受到监管。我使用的 CSS 是这样的：

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

这是使用上述 CSS 的页面图片：

如您所见，仍然存在一些较小的长度问题。但是我的主要问题是，每个组件上的“付款日”和“滚动日”字段都在同一个表格单元格中，所以即使我在它们之间放置了一个
，间距也不等于所有内容之间的垂直间距页面上的其他内容。如何在页面上的所有内容之间设置规则的垂直间距？

编辑：

这是 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 Helpers 之间的间距等于页面上其他所有内容之间的间距。希望这会有所帮助。

【问题讨论】：

标签： html css

【解决方案1】：

尝试调整边距而不是填充。 input{margin-bottom: 5px;} padding 在边框内，margin 在边框外。

【讨论】：

【解决方案2】：

如果您可以为此发布 html，将会很有帮助。您可以使用的一种方法是向字段添加填充。发生的事情是您有一个不可见的表格边框，在所有其他字段之间创建了间距（我认为）。然后，当您在同一个表字段中有 2 个表单字段时，您就没有边框了。

最简单的解决方案是将它们分开的字段。如果您需要“滚动日”字段在 2 个字段之间浮动，您可以将其设置为 rowspan="2"。或者，您可以在 CSS 中添加一行，例如：

input{margin-bottom: 2px;}

当然，这会影响任何输入，但可能不是最佳途径。

【讨论】：

当我添加填充时，它实际上会放大实际输入下拉列表，而不仅仅是在其下方放置空间。