刪除有序列表中元素的縮進<ol>
[英]Remove indent for element within an ordered list <ol>
問題描述
我正在嘗試更改表格元素在有序列表中的左側位置。 我想實現的是表格橫跨整個寬度。 似乎正在發生的事情是，無論我嘗試什么，該表始終以與其位於內部或相鄰的<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;"
...那沒用。
關於如何使表格元素忽略縮進的任何想法？
3 個解決方案
解決方案1
0 2016-05-24 17:11:55
ol { padding: 0 }
應該做到的。 默認的ol樣式帶有填充。
解決方案2
0 2016-05-24 17:15:37
像這樣嗎 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>
解決方案3
0 已采納 2018-06-15 12:09:24
我回到了這個問題，並給出了我確定的答案。
似乎無法更改<ol>表格元素的填充或左側位置，它只是將表格向左移動，右側出現了間隙。 解決此問題的最簡單方法是將表格元素放在<ol>之外，然后重新啟動<ol>塊。 通過使用CSS計數器，可以繼續編號。
為了實現計數器的延續，我從該主題中獲得了一些啟發 ： 如何開始一個新列表，並從上一個列表繼續編號？
但是，我不喜歡將特殊類應用於<ol>塊的需要； 在我看來，他們在這里沒有做錯任何事情，這是特別的中間因素。 因此，為了在CSS中指示應該繼續編號，我嘗試了CSS選擇器，例如： ol + table + ol 。 此靶向<ol>下面的初始表后<ol> 然后通過規定不進行計數器重置來繼續進行計數器考慮。
為了避免當這三個元素按順序排列時所有<ol>繼續，可以將一個類（ mid-ol ）添加到表中，並且CSS選擇器可以是： ol + table.mid-ol + ol ...但是，其實為什么停在那里？ 您可以在幾個<ol>元素（例如div ，這可能有用！）中間使用具有mid-ol類的ANY元素，因此選擇器變為：ol + .mid-ol + ol。 我檢查過，如果您從表中刪除該類，則第二個<ol>將開始其計數器重置。
以下指向JSFiddle的鏈接應說明解決方案 ： https ://jsfiddle.net/r7u4vgtz/
這個答案的唯一缺點是，如果您想以不為1的數字開頭第一個<ol> ，那不是這個問題的重點，因此我沒有走那么遠。
另外，添加與計數器相關的樣式后，在<li>元素中包含<p>元素存在一個問題； <p>元素正在換行，這是他們以前沒有做過的。 因此，我補充說，任何帶有<li>父級的<p>元素都以內聯方式顯示，但隨后的所有<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 <li> 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 <li> 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 <ol> block.</p>
<p>It is defined as a .mid-ol class element, which allows special consideration for subsequent <ol> blocks.</p>
</td>
</tr>
</table>
<ol>
<li>
<p>Last list item element.</p>
</li>
</ol>
</body>
</html>
刪除有序列表的左側間距（OL）
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.