更好的有序列表（使用简单的 PHP 和 CSS）

有序列表很无聊！当然，您可以应用背景图片并对常规有序列表进行相当多的修饰，但您对数字本身的控制力不够。这是一个放弃传统有序列表并创建您自己的示例！

如果您设置了一个循环，或者已经在现有的循环中（例如 WordPress 评论），那么就会出现创建酷炫编号列表的可能性。只需在 PHP 中设置一个整数变量，并在循环运行时递增它。然后在需要的地方输出变量，并使用 CSS 对其进行样式设置。

在此示例中，我使用了带有巨大字体大小、灰色颜色、左浮动以及少量右边距的 h2 元素。此技术既简洁又可靠，因为它不使用任何图形元素来包含数字。

这是一个简单的 PHP 循环示例

<?php for ($i = 1; ; $i++) { 
		
   if ($i > 9) {
      break;
   }  ?>
		   
   <div class="comment-box">
      <h2 class="number"><?php echo $i ?></h2>
      <p>CONTENT GOES HERE.</p>
   </div>
		   
<?php } ?>

这是适用的 CSS

h2.number {
	position: relative;
	top: 0px;
	left: 0px;
	font-size: 10em;
	color: #ccc;
	float: left;
	margin-right: 10px
}

#page-wrap {
	width: 760px;
	background: white;
	margin: 0 auto;
	padding: 10px 0px 50px 0px;
	background: white url(images/gradient2-bg.gif) bottom repeat-x;
}

#description-area {
	padding: 20px;
}

.comment-box {
	margin: 0px 0px 50px 50px;
	padding: 20px;
	width: 240px;
	border: 1px solid black;
	float: left;
}

在线示例

下载示例

Mirmillo

# 2007年10月28日

您可以通过以下方式简化您的 PHP 代码

<?php for ($i = 1;$i<10 ; $i++) { ?>
   <div class="comment-box">
      <h2 class="number"><?php echo $i ?></h2>
      <p>CONTENT GOES HERE.</p>
   </div>
<?php } ?>

Chris Coyier

# 2007年10月28日

感谢 Mirmillo！这更简洁一些。

kimblim

# 2007年10月28日

虽然我同意您的结果看起来不错，但我必须不同意您的标题。这不是“更好的有序列表”，因为它根本不是有序列表。对于这样的内容，您确实应该使用<ol>，尽管样式选项非常有限。

BillyG

# 2007年10月28日

我看到一堆 div、标题和段落。我看到的唯一 CSS“技巧”是网格派生的布局。

Chris Coyier

# 2007年10月28日

@kimblim：您为什么认为对于“这样的内容”您应该使用<ol>？我没有看到以这种或那种方式执行操作的任何语义优势。此外，我认为标题是合适的。在我看来，此示例优于常规有序列表，结果确实是有序列表。

@BillyG：虽然我所有的示例都将以某种方式使用 CSS，但它们可能并非都专门针对 CSS。“技巧”部分可以相当宽松地解释=）。

kimblim

# 2007年10月28日

@Chris
您自己也说过：“结果确实是有序列表”。如果是这种情况，那么您确实应该使用<ol>（有序列表）。对于有序列表，使用除<ol>之外的任何内容都没有任何语义意义。您的示例采用标题（<h2>）并将其转换为编号项目符号。

kimblim

# 2007年10月28日

^“编号项目符号”应为“编号列表项”

Chris Coyier

# 2007年10月28日

@kimblim：您说如果它不是<ol>，它就不是有序列表，而我说它不是<ol>并不意味着它不是有序列表。我想这只是看待问题的不同方式。如果可以通过使用<ol>来实现此示例，我同意从语义上讲会更好，但不幸的是，它做不到。

Jermayn Parker

# 2007年10月28日

我认为人们在这里错过了重点。这实际上不是列表，甚至不是有序列表，而是列表的替代方案。

我喜欢它，它与众不同，但这就是重点：D

Dave

# 2007年10月29日

您可以使用一个浮动元素使内容缩进。然后您不需要任何服务器端脚本，它将成为语义 OL。您甚至可以保持 HTML 完全语义化并使用 JS 添加 html。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
$(function() {
	$("ol li")
		.addClass("improved")
		.each( function() {
			$(this).html('<span class="content"><span class="block"></span>'   $(this).html()   '</span>')
		})
});
</script>
<style type="text/css">
body { font-size:75%; font-family:Verdana, Arial, Helvetica, sans-serif; }
p { margin:0 0 0.5em 0;}
ol { padding:0; margin:70px 0 0 70px;}
li.improved { font-size:400%; color:#ccc; padding:0;width:40%; float:left;margin: 0 0 50px 50px; }
li.improved span.content { font-size:25%; color:#000; position:relative; top:-40px; left:-60px; vertical-align:bottom;}
li.improved span.block{ float:left; width:60px; height:110px; }
</style>
</head>
<body>
<ol class="better">
	<li>Content goes here.</li>
        <li>Content goes here.</li>
        <li>Content goes here.</li>
        <li>Content goes here.</li>
</ol>
</body>
</html>

hellyeahdude.com

# 2007年10月31日

哇，非常有趣且深入。继续努力！:)

Ian

# 2008年1月25日

我们如何更改每个项目的內容？

Chris Coyier

# 2008年1月27日

@Ian：查看上面 Dave 的精彩代码建议。相同的结果，您可以为每个项目指定内容，而不是将其作为循环的一部分。

最初，我以为这将是已存在循环的一部分，其中内容正在动态生成（例如从数据库中提取）。例如，WordPress 评论循环…

James

# 2008年1月30日

实际上，如果您真的有兴趣减少 PHP 代码，您可以这样做（在语义上也更友好）

<?for ($i = 1;$i<10 ; $i  ):?>
   <div class="comment-box">
      <h2 class="number"><?=$i?></h2>
      <p>CONTENT GOES HERE.</p>
   </div>
<?endfor;?>

从 PHP 5.1 开始，此语法有效。

Foxinni - Wordpress 设计师

# 2008年1月30日

非常好。打算尝试将其整合到我的 WordPress 设计中。

Paul Walker

# 2008年2月2日

对于更简单的样式（基本上，单独的文本样式），更容易执行以下操作

CSS

ul, ol {
/*Bullet Styles*/ 
}

ul>*, ol>* {
/*text Styles*/
}

HTML

ul>
li>p>paragraphâ€¦/p>/li>
li>p>paragraphâ€¦/p>/li>
li>p>paragraphâ€¦/p>/li>
/ul>

ol>
li>p>paragraphâ€¦/p>/li>
li>p>paragraphâ€¦/p>/li>
li>p>paragraphâ€¦/p>/li>
/pl>

当然 - 这有局限性，即数字无法（直接）与文本分开定位（或使其浮动），但除非您*需要*这样做，否则在我看来，这可能是一个更好的解决方案。

John Faulds

# 2008年2月27日

“如果可以通过使用<ol>来实现此示例，我同意从语义上讲会更好，但不幸的是，它做不到。”

为什么使用无序列表不可行？只需将您的 div 替换为列表项，从列表中删除编号，并像您对评论所做的那样包含 PHP，几乎与您对评论所做的一样。因此，在这种情况下，我相信 Kimblim 完全正确。

Ralph

# 2008年3月7日

哦……目前我正在开发一个网站概念，也许我需要您的提示；)

Ralph

# 2008年3月20日

忘记添加：将此放在最后一个框下：（注意：没有测试它，但它应该可以完美运行）

<script language="JavaScript" type="text/javascript">
	function list_it(){
	//Get all H2 elements
	var h2s = document.getElementsByTagName('h2');
	//Set up the counter for the numbers
	var listCounter = 1;
	//start to loop true all h2's
	for (var i = 0; i<h2s.length; i  )
	{
		var h2 = h2s[i];
		//only do the following if the H2 has the classname number
		if(h2.className == 'number') {
			//Change innerHTML 
			h2.innerHTML = listCounter;
			//Add 1 to the counter
			listCounter  
		}
	}
}
//Fire the list function
list_it();
</script>

它将循环遍历所有 H2 元素，检查它们是否包含 className 数字并将内容替换为“列表编号”

Richard

# 2008年4月7日

不错的文章。这是我如何驯服有序列表；)。

CSS 爱好者

# 2008年7月10日

有序列表的绝妙用法。来自 Mirmillo 和其他人的修改创造了 CSS 脚本的杰作。

Robin

# 2008年9月6日

您如何对评论条目进行编号？您能否提供有关如何编辑我的 CSS 的代码和说明？

kadıköy çiçekçi

# 2008年10月10日

非常感谢

johny why

# 2009年1月16日

这是我创建的一个非常简单的方法，没有任何 php、javascript——只是纯 CSS——让我的 OL 中的数字指示符像首字下沉一样浮动。它看起来像这样。如您所见，它在 Chrome 和 Firefox 中完美运行，但当然 IE 8 会崩溃——浮动有效，但 OL 数字不会递增。我敢打赌这里有人可以解决这个问题。

此方法的关键
–不要在 LI 中放置任何内容。它们是空的。所有内容都放在每个结束 LI 之后。
–使周围的 div 浮动，而不是 LI。
–OL 必须在样式内指定十进制。

.dropli { float: left; width: .7em; font-size: 8em; line-height: 83%; }


.dropcontent { margin-bottom:2em; }

ol { list-style: decimal inside; } ……… <ol> < div class=”dropli”><li ></li></div>< div class=”dropcontent”>orem ipsum dolor sit amet, consectetuer… </div>

Brad Strickland

# 2009年1月23日

哇！优秀的教程。我一直都在寻找这样的东西。列表实在太无聊了。

此评论线程已关闭。如果您有重要信息要分享，请联系我们。