Question

我正在尝试更改有序列表中的表元素的左侧位置。我想要实现的是表格跨越整个宽度。似乎正在发生的事情是，无论我尝试什么，表总是与它位于或相邻的<li>元素具有相同的缩进。

例如：

<ol>
        <li>
            <p>
                Something.
            </p>           
        </li>
        <li>
            <p>
                Something else, with an image this time.
                <figure.left>
                    <img src="SomeImage.png" style="max-width: 100%;width: 428px;height: auto;" />
                </figure.left>
            </p>
        </li>
        <table style="border-top-style:solid; border-top-width:1px; border-top-color:#d3d3d3; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#d3d3d3; position:fixed; left:0px;" cellspacing="0">
             <col style="width: 48pt;" />
             <col style="width: 396pt;" />
             <tr>
                 <td>                         
                    <img src="TableImage.png" style="width:42px; height:auto;" />                           
                 </td>
                 <td>
                     <p>A paragraph in the table.</p>
                     <p>A second paragraph in the table.</p>
                 </td>
             </tr>
         </table>
         <li>Last thing.</li>
    </ol>

所以我想要的是跨越页面宽度的表格（实际上我输出的是PDF）。我试过了：

style="position:fixed;left:0px;"

......哪些不起作用。

关于如何使表元素忽略缩进的任何想法？

Answer 1

ol { padding: 0 }

应该做的伎俩。默认ol样式有填充。

Answer 2

这样的东西？ https://jsfiddle.net/breezy/aL4aqgzu/

我试图了解你想要实现的目标，似乎你想要在表格中使用pdf，并且在表格的左边有一些填充？

我看到你在li里面没有这张桌子，这就是我所做的。

     <li style="width:500px;
       height:600px;
       display:block;
       padding:0;
       margin:0;
       list-style: none;background: white;
       overflow:hidden;
       clear:both"> pdf goes here i think..just an example?

<table style="border-top-style:solid; border-op-width:1px; border-top-color:#d3d3d3; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#d3d3d3; position:fixed; left:0px;" cellspacing="0">
            <col style="width: 48pt;" />
            <col style="width: 396pt;" />
            <tr>
              <td>
                <img src="TableImage.png" style="width:42px; height:auto;" />
              </td>
              <td>
                <p>A paragraph in the table.</p>
                <p>A second paragraph in the table.</p>
              </td>
            </tr>
          </table></li>

Answer 3

我已经回答了这个我已经解决的答案。

似乎更改<ol>中表格元素的填充或左侧位置不起作用，它只是将表格移到左侧，右侧出现间隙。解决此问题的最简单方法是将表元素放在<ol>之外并重新启动<ol>块。通过使用CSS计数器，可以继续编号。

为了实现反向延续，我从这个主题中获得了一些灵感：How to start a new list, continuing the numbering from the previous list?

但是，我不喜欢将特殊类应用于<ol>块;在我看来，他们在这里没有做错任何事，而且包含了特别的中途元素。因此，为了在CSS中指出编号应该继续，我尝试了一个CSS选择器，如：ol + table + ol。这会定位在最初<ol>之后的表之后的<ol>。然后通过规定反复位是没有来进行持续反作用。

为了避免在这三个元素都在一个序列中时所有<ol>继续，可以将一个类（mid-ol）添加到表中，CSS选择器可以是：ol + table.mid-ol + ol ..但是，实际上，为什么要停在那里？您可以在几个mid-ol元素中使用<ol>类的任何元素（例如div，这可能很有用！），因此选择器变为：ol +。 mid-ol + ol。我已经检查过，如果你从表中删除了第二个<ol>将开始计数器重置的类。

以下指向JSFiddle的链接应说明解决方案： https://jsfiddle.net/r7u4vgtz/

这个答案的唯一缺点是，如果你想用一个不是1的数字开始你的第一个<ol>。那不是这个问题的重点，所以我没有那么远。

此外，在添加了与计数器相关的样式后，<p>元素中存在<li>个元素时出现问题; <p>元素正在采用新线，这是以前没有做过的。所以我添加了所有带有<p>父级的<li>元素以内联方式显示，但随后会像往常一样显示任何后续<p>个元素。

对于那些正在浏览这些答案并且不想搞乱JSFiddle的人来说，这里有一个简单的HTML代码示例：

<html>
  <head>
    <style  type="text/css">

      table {
        width:100%; 
        border-top-style:solid; 
        border-top-width:1px; 
        border-top-color:#d3d3d3; 
        border-bottom-style:solid; 
        border-bottom-width:1px; 
        border-bottom-color:#d3d3d3;
      }

      ol { 
        counter-reset: mycounter; 
      }

      ol li { 
        counter-increment: mycounter;
        list-style-type: none;
      }

      ol li:before { 
        content: counter(mycounter) ". ";
        margin-left:-1.3em;
      }

      ol + .mid-ol + ol {
        counter-reset: none;
      }

      li > p {
        display: inline;
      }
      li > p + p {
        display: block;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>
        <p>A list item with this paragraph element.</p>
      </li>
      <li>
        <p>Another list element using a paragraph element</p>
        <p>But with another paragraph within the same &lt;li&gt; to check that the paragraph styling is good. It seems that it is.  This second block uses display:block, as is proper for a paragraph.</p>
        <p>Here's a third paragraph in the same &lt;li&gt; element.  Now we can be sure the styling is good!</p>
      </li>
    </ol>
    <table cellspacing="0" class='mid-ol'>
       <col style="width: 48pt;" />
       <col style="width: 396pt;" />
       <tr>
         <td>
           <img src="http://woodworkingvdo.com/wp-content/uploads/2014/02/small-tables-9.jpg" style="width:42px; height:auto;" />
         </td>
         <td>
           <p>This table is not indented, as it's actually outside of the &lt;ol&gt; block.</p>
           <p>It is defined as a .mid-ol class element, which allows special consideration for subsequent &lt;ol&gt; blocks.</p>
         </td>
       </tr>
     </table>
     <ol>
       <li>
         <p>Last list item element.</p>
       </li>
     </ol>
   </body>
 </html>

删除有序列表<ol>中元素的缩进

3 个答案: