Question

我试图获得以下效果，其中单元格中的数字条目是右对齐但具有25px的右边距填充。

出于某种原因，我似乎无法覆盖填充设置：我的模板中为1。

数字最终没有填充权。（您在上面的示例中看到的是在Inspect中调整CSS的结果，如下所述）

视图代码是

    <div class="field">
      <td><%= :number_of_rolls_fill %></td>
      <span class="number_right"> <td><%= @bedsheet_line.number_of_rolls_fill %></td></span>
    </div>
  </tr>

application.css中的css（除了模板之外，rails还用于自定义css）

.number_right {
    /* used to right align numbers in table cells */
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    padding-right: 25px !important;
}

我已尝试过多种变体。

如果我进行检查，我发现如果我取消选中填充：1px在两个区域表明我会得到我想要的效果。

我的样式表已

.art-article th, .art-article td
{
   padding: 1px !important;
   vertical-align: top;
   text-align: left;
}

.art-article th
{
   text-align: center;
   vertical-align: middle;
   padding: 1px !important;
}

pre
{
   overflow: auto;
   padding: 0.1em;
}

.preview-cms-logo
{
   border: 0;
   margin: 1em 1em 0 0;
   float: left;

我可以通过更改我的样式表来获得我想要的效果但是我会在应用程序的其他区域引起问题。

Answer 1

您需要专门针对该元素：

.art-article td .number_right {
    /* used to right align numbers in table cells */
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    padding-right: 25px !important;
}

此外，范围应位于<td>元素内：

<td><span class="number_right"> <%= @bedsheet_line.number_of_rolls_fill %></span></td>

Answer 2

这是一个接近当前代码的工作示例。它使用你的css并仅修改视图。

/* css */
td.number_right {
    /* used to right align numbers in table cells */
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    padding-right: 25px !important;
}

# view
  <tr>
      <td><%= :number_of_rolls_fill %></td>
      <td class="number_right"><%= @bedsheet_line.number_of_rolls_fill %></td>
  </tr>

这是显示结果的jsfiddle。

您可以删除<div class="field">和<span class="number_right">并将number_right类直接应用于您的表格单元格。之前的语法不是很好，所以这会清理它。此外，如果您在表格单元格内移动了范围，则必须设置width或display: block;才能使其正确对齐。

示例，其中跨越td：

/* css */
td span.number_right {
  /* used to right align numbers in table cells */
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
  padding-right: 25px !important;
  display: block;
}

# view
<td><span class="number_right">$80</span></td>

尝试使数字与单元格中的右边距对齐

2 个答案: