css - haml 代码如何使它有一些缩进

Question

我有以下显示元素的代码，如下所示

    Mytable
1.  line1
2.  line2
3.  line3
4.  line4

但我希望它有缩进，如下所示

     Mytable
   1.  line1
   2.  line2
   3.  line3
   4.  line4

我的代码在这里

      %div{:class => 'test1'}
        %table#tablename
          %thead
            %tr
              %th.lead Mytable

          %tbody              
            %tr
              %center
              %td 1.line1
            %tr
              %td 2. line2
            %tr 
              %td 3. line3
            %tr
              %td 4. line4

Answer 1

有很多方法可以做到这一点。这是一个。jsFiddle

<div class="test1">
    <table id="tablename">
       <thead>
       <tr><th class="lead">Mytable</th></tr>    
        </thead>    
        <tbody>
            <tr><td>1. line1</td></tr>
            <tr><td>2. line2</td></tr>
            <tr><td>3. line3</td></tr>
            <tr><td>4. line4</td></tr>
        </tbody>
    </table>
</div>​

CSS

.test1
{
    padding-left:20px;
}​

Answer 2

使用 CSS 向每行中的第一个单元格添加填充：

table#tablename tbody tr td:first-child {
    padding-left: 2em;
}

在此处查看示例：http: //codepen.io/anon/pen/ramuw