設置有序列表的樣式，使數字左對齊並顯示在項目上方？
[英]Style an ordered list so the number appears left-aligned and above the item?
問題描述
我認為這將是一件容易的事情，但我還沒有找到一個好的解決方案（也許我也使用了錯誤的搜索詞）。
我想設置一個有序列表的樣式，以便項目顯示如下：
1
項目一
2
項目二
3
第三項
有沒有辦法簡單地用 CSS 做到這一點？
提前謝謝了！
5 個解決方案
解決方案1
3 2010-10-18 08:37:14
您可以嘗試以下方法：
<style>
ol {
list-style-position: inside;
padding-left: 0;
}
</style>
<ol>
<li> <div>foobar</div></li>
<li> <div>wah la</div></li>
</ol>
它適用於 FF 和 Chrome，但我當前的機器上沒有 IE 可以嘗試。
解決方案2
2 2010-10-18 08:30:36
AFAIK， CSS不允許您對列表項相對於“項目符號”（或數字或其他）的位置進行大量控制......所以直接在HTML ，在服務器端，或通過 Javascript 在客戶端...
盡管如此，以下工作（至少在 Firefox 中），但相當丑陋（中間有那個br :-/ ）
<html>
<head>
<style type="text/css">
li > p{
margin-left:-30px;
margin-top:-10px;
}
</style>
</head>
<body>
<ol>
<li><br/><p>item 1</p></li>
<li><br/><p>item 2</p></li>
</ol>
</body>
</html>
這個想法是用br強制列表項的內容位於另一行，然后在內容上應用一些負邊距將其移動到您想要的位置......這當然不是一個好的解決方案。 ..此外，我認為每個瀏覽器都可能以自己的方式生成“列表索引”，所以沒有什么好的方法可以讓它在所有瀏覽器上運行......
解決方案3
2 已采納 2010-10-18 08:33:08
您可以將content屬性與:before偽元素和\a換行符轉義一起使用：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>OL Test</title>
<style type="text/css">
li:before {
content: "\a";
white-space: pre;
}
</style>
</head>
<body>
<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ol>
</body>
</html>
這在支持 CSS 2.1 的瀏覽器上應該可以正常工作。
解決方案4
1 2015-09-08 15:37:14
我知道這個問題真的很老，但我最終在搜索相同的答案時找到了它，並且提供的這些答案並沒有完全滿足我的需要。 我也剛剛學會了使用 CSS 中的“計數器”這個非常酷的技術。
ol { /* Remove default numbers */ list-style: none; counter-reset: item; } ol li { /* Increment the counter for this element */ counter-increment: item; /* Style the vertical spacing as needed */ display: block; margin: 1em 0; } ol li:before { /* Add the numbers as content in the before pseudo */ content: counter(item); /* Continue styling as needed, changing, fonts, position, etc. */ display: block; margin-bottom: 1em; }
<ol> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> </ol>
解決方案5
0 2010-10-18 09:16:27
它絕對必須是有序列表嗎？
如果您正在動態生成內容，那么您始終可以自己輸出數字，然后根據您的喜好格式化標記 - 而不是試圖通過做一些“聰明”的事情來強制瀏覽器，而是通過做一些“聰明”來簡化情況
Items flex item左對齊和右對齊，當瀏覽器window縮小時如何居中？
[英]Items flex item is left-aligned and right-aligned, how to center it when the browser window is resized down?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.