编辑“WordPress:Styling Lists with CSS”

__TOC__
当显示列表内容时，[[WordPress:WordPress|WordPress]]使用标准的[[WordPress:Glossary#XHTML|XHTML]]元素：

* <nowiki><ol></nowiki> 为一个有序的列表 (每条的顺序很重要，所以通常用数字表示)
* <nowiki><ul></nowiki>  为一个无序的列表(通常情况下显示bullets)
* <nowiki><li></nowiki> 为一个列表中一条，可以有序也可以无序。

默认情况下，WordPress中多数列表(和一些列表条目)通过<tt>id</tt>或者<tt>class</tt>属性来识别，使样式列表变的简单。通过很小的<tt>style.css</tt>文件的改动，你可以[[WordPress:Creating_Horizontal_Menus|水平]]显示出列表而不是垂直显示，设置[[WordPress:Dynamic_Menu_Highlighting|动态高亮菜单]]，[[WordPress:#Styling_the_Bullet|改变 bullet符号]]或者给样式编号，移除全部bullet符号，或者这些符号的组合。

== WordPress 1.5 嵌套列表设计 ==

通过WordPress v1.5中的[[WordPress:Using Themes|主题]]创新，不同的主题格式列表有不同的方式。使用者通常想要修改的最多的列表就是边栏目录列表。因为很多边栏有'''嵌套'''列表，让我们更深入的研究一下

从检查你使用的主题文件夹中找到的<tt>style.css</tt>文件开始，多数WordPress主题把边栏菜单部分用''sidebar''或者''menu''标示，或者是两者的组合。这样，寻找边栏[[WordPress:Templates|模板]]文件，尤其是<tt>sidebar.php</tt>。以下是<tt>sidebar.php</tt>文件的样本，你的版本可能有所不同，但是思想概念是一样的。

<pre><div id="sidebar">
<ul>
  <li id="search"><form method="get" id="searchform"
      action="/wordpress/index.php">
    <div><input type="text" value="" name="s" id="s" />
	<input type="submit" id="searchsubmit" value="Search" />
    </div></form></li>
  <li id="pagenav"><h2>Pages</h2>
    <ul>
    <li class="page_item">
       <a href="http://www.examplesite.com/wordpress/?page_id=2"
	title="About Us">About Us</a></li>
    <li class="page_item">
       <a href="http://www.examplesite.com/wordpress/?page_id=4"
        title="Contact">Contact</a></li>
    <li class="page_item">
       <a href="http://www.examplesite.com/wordpress/?page_id=8"
        title="Site Map">Site Map</a></li>
	</ul></li>
  <li><h2>Archives</h2>
      <ul>
	<li><a href='http://www.examplesite.com/wordpress/?m=200502'
	 title='February 2005'>February 2005</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200501'
	 title='January 2005'>January 2005</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200412'
	 title='December 2004'>December 2004</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200411'
	 title='November 2004'>November 2004</a></li>
      </ul></li>
  <li><h2>Categories</h2>
     <ul>
	<li><a href="http://www.examplesite.com/wordpress/?cat=47"
	 title="Stories of our life">Stories</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=48"
	 title="Computer Tips">Computer Tips</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=6"
	 title="WordPress Tips">WordPress Tips</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=28"
	 title="Web Page Design Advice">Web Page Design</a></li>
     </ul></li>
  </ul>
</div></pre>

当你使用嵌套列表并想要每个列表都有自己的样式的时候，你必须在样式表(<tt>style.css</tt>)中重建"嵌套"。

<pre>#sidebar ul {attributes}
#sidebar li {attributes}
#sidebar ul li {attributes}
#sidebar ul ul li {attributes}
#sidebar ul ul ul li {attributes}
#pagenav {attributes}
#pagenav ul {attributes}
#pagenav ul li {attributes}</pre>

;ul :The first style (<tt>#sidebar ul</tt>) sets the look for the overall list.  It usually contains the margins and padding styles and may contain the font-family, color, and other details for the overall list.
;li :The <tt>#sidebar li</tt> assigns a style to the actual list item.  Here you can set the format to include a bullet or not. You can also change the font, font-size, or color, and you can even add borders.
;ul li :The <tt>#sidebar ul li</tt> determines the style of the first nested list.  Each first level nested list will be customized here, but you can style each of these sub-lists differently if they are contained within a specific [[WordPress:Glossary#CSS|CSS]] ID.  In the above example, after the <tt>#search</tt> section, the first nested list is <tt>#pagenav</tt>.  If you use [[WordPress:Pages]] this is where the list of [[WordPress:Pages]] would be generated.  Since [[WordPress:Pages]] work outside of [[WordPress:The Loop|The WordPress Loop]], and often highlight specific information like "About Us", "Contact", and "Site Map", you may want to design the [[WordPress:Pages]] style differently than the rest of your lists by putting the specific information about the look of the [[WordPress:Pages]] in the <tt>#pagenav</tt>.
;ul ul li :The <tt>#sidebar ul ul li</tt> applies style to the links within the <tt>#sidebar ul ul</tt> to help customize the look of this list.  Again, if you have customized the <tt>#pagenav</tt> list, it will be different from the rest of your nested list items.
;ul ul ul li :The <tt>#sidebar ul ul ul li</tt> is the style for the sub-sub-list.  If you have a list of [[WordPress:Glossary#Category|categories]] with subcategories, the [[WordPress:Glossary#Category|category]] title will be the first level of the list, the categories would be the second level of the list, and any subcategories would be the third level, or sub-sub-list, such as the example below.  Some designers like having the third level list feature a smaller font, a different bullet, or even a different color to highlight them from the list items above them:

:*Category Title
:**Category One
:**Category Two
:***Sub-Category One
:***Sub-Category Two
:**Category Three

;ul :第一个样式(<tt>#sidebar ul</tt>)设置整体列表的外观. 通常包含整个列表的页边空白和填充样式，也可能包含字体库，颜色和别的内容。
;li : <tt>#sidebar li</tt> 分配样式给现有的列表项目.  这里你可以设置是否包含bullet 符号，你也可以改变字体，自号，或者颜色，你还可以加入边线.
;ul li :<tt>#sidebar ul li</tt>确定第一个嵌套类表的样式. 每个第一级嵌套列表都在这里制定,但是如果它们有详细的[[WordPress:Glossary#CSS|CSS]]ID的话，你可以设计每个嵌套的子列表。上述例子中，<tt>#search</tt> 部分之后, 第一级嵌套列表是<tt>#pagenav</tt>. 如果你使用[[WordPress:Pages|页面]]，这里是[[WordPress:Pages|页面]]的列表生成的地方。因为 [[WordPress:Pages|页面]]工作在[[WordPress:The Loop|WordPress循环]]之外, 并且通常高亮显示特殊的信息比如"About Us", "Contact", and "Site Map", 你可能想通过把关于[[WordPress:Pages]]外观特殊信息输入<tt>#pagenav</tt>来设计[[WordPress:Pages|页面]]，使它的样式与列表的其他部分不同.
;ul ul li : <tt>#sidebar ul ul li</tt>在<tt>#sidebar ul ul</tt>中提供了连接的样式 以帮助定义列表的外观。另外，如果你已经定义了<tt>#pagenav</tt>列表，将会和你剩下的的嵌套列表不同。
;ul ul ul li : <tt>#sidebar ul ul ul li</tt>是二级子表的样式。如果你有一个带有子类的[[WordPress:Glossary#Category|分类]]列表，[[WordPress:Glossary#Category|分类]] 标题将是列表的第一级，分类是第二级，而任何子类将是第三级，或者是子表，如下面的例子。一些设计者喜欢在第三级使用一些较小的字体，不同的符号，或者不同的颜色，高亮显示，以区别它们上一层的项目：

:*Category Title
:**Category One
:**Category Two
:***Sub-Category One
:***Sub-Category Two
:**Category Three


== Styling Specific List Items ==

Do you want your [[WordPress:Glossary#Category|Categories List]] to look different from your Archives List?  Then open up the <tt>index.php</tt> or <tt>sidebar.php</tt> and carefully add the following style references to the appropriate list item:

<div style="border:1px dashed blue; width:50%; margin: 20px; padding:20px"><tt>&lt;li '''id="categories"'''>&lt;h2>Categories&lt;/h2>.....</tt><br /><br />
<tt>&lt;li '''id="archives"'''>&lt;h2>Archives&lt;/h2>....</tt></div>

== 设计特定列表项目 ==

你想让你的[[WordPress:Glossary#Category|分类列表]]看起来与文档列表不同吗？打开<tt>index.php</tt>或者<tt>sidebar.php</tt>，仔细的加入如下样式参数来更改列表项目：

<div style="border:1px dashed blue; width:50%; margin: 20px; padding:20px"><tt>&lt;li '''id="categories"'''>&lt;h2>Categories&lt;/h2>.....</tt><br /><br />
<tt>&lt;li '''id="archives"'''>&lt;h2>Archives&lt;/h2>....</tt></div>

To customize the Categories and Archives list, add the following to your stylesheet to customize these individually:

<pre>#categories {attributes}
#categories ul {attributes}
#categories ul li {attributes}
#archives {attributes}
#archives ul {attributes}
#archives ul li {attributes}</pre>

Go through any other sections of your list and give them a style reference name and add them to your style sheet.  When you've identified which part of the list controls which aspect of the list, it's time to start changing the look of the list.

要想自定义分类和文档列表，把下列代码加入样式表来单独定义：

<pre>#categories {attributes}
#categories ul {attributes}
#categories ul li {attributes}
#archives {attributes}
#archives ul {attributes}
#archives ul li {attributes}</pre>

检查列表的其它部分，给它们一个样式参数名，把它们加入到你的样式表。当你能识别出列表的哪一部分控制列表的哪一方面时，就是改变列表外观的时候了。

=== Styling individual items ===

If you want to use image replacement techniques to style your list, each <tt>LI</tt> tag will need its own class or ID.  Try the [http://wordpress.org/extend/plugins/classy-wp-list-pages/ Classy wp_list_pages] plugin.

=== 设计个别项目 ===

如果你想使用图片替换技巧设计你的列表，那么每个<tt>LI</tt>标签需要它自己的类别或者ID，你可以试试[http://wordpress.org/extend/plugins/classy-wp-list-pages/ Classy wp_list_pages]插件。

== Styling Your Lists ==

An important part of a list is the bullet - an eye catching dot, spot, or graphic that tells viewers "this is a list". The style of bullet or numbering for a list is determined by a '''list-style-type property''' in the style sheet. The default value is <tt>disc</tt>. Other basic values are <tt>circle</tt>, <tt>square</tt>, <tt>decimal</tt>, <tt>decimal-leading-zero</tt>, <tt>lower-roman</tt>, <tt>upper-roman</tt>, and <tt>none</tt>.  Let's change the default value to something else, like a square.

<pre>#sidebar li {
   list-style: square;
}</pre>

== 设计列表 ==

列表的一个重要部分就是着重号 – 一个吸引访问者眼球的点或者图片，告诉他们"这是个列表"。一个列表中的符号或者数字的样式由样式表中的'''list-style-type property'''决定。默认的值是<tt>disc</tt>。其它基本值是<tt>circle</tt>, <tt>square</tt>, <tt>decimal</tt>, <tt>decimal-leading-zero</tt>, <tt>lower-roman</tt>, <tt>upper-roman</tt>, and <tt>none</tt>。我们把默认值改成别的东西如方块。

<pre>#sidebar li {
   list-style: square;
}</pre>

Instead of typing <tt>list-style-type</tt>, you see a shorthand form of <tt>list-style</tt>, and instead of using the default <tt>disc</tt>, the list now features small squares.

不用输入<tt>list-style-type</tt>，你可以使用速记形式<tt>list-style</tt>，而且代替了默认的<tt>disc</tt>，列表现在使用的是小方块了。

But not all lists need bullets.  By their overall layout, you just ''know'' a list is a list.  To eliminate the bullet, change the stylesheet to this:

<pre>#sidebar li {
   list-style: none;
}</pre>

Now, anything tagged with <nowiki><li></nowiki>, within the DIV of the ID of <tt>#sidebar</tt>, would have no bullet.  Experiment with different values to see the results you can achieve.

'''HINT:''' In terms of accessibility, an ordered list is easier to navigate than an unordered list.

但是不是所有的列表都需要这种着重号，通过他们的整体规划，你只需要''知道''列表是一个列表就够了。要消除着重号，只需要把样式表修改成这样：

<pre>#sidebar li {
   list-style: none;
}</pre>

现在，任何带有<nowiki><li></nowiki>的标签，<tt>#sidebar</tt>内的ID的DIV标签内，都不会在有bullet符号了。你可以尝试其他不同的值来看看你可能得到什么样的结果。

'''提示:'''根据易用性，整齐的列表要比不整齐的列表更容易浏览。

=== Using a Custom Image Instead of a Bullet ===

Tired of boring bullets? Let's get rid of the boring with a few [[WordPress:Glossary#CSS|CSS]] techniques. In this case, use '''list-style-image''' to instruct the browser to use your bullet image instead of the old boring default bullets.

=== 使用图片代替着重号===

厌倦了乏味的着重号吗？让我们用几个[[WordPress:Glossary#CSS|CSS]]技巧来处理这乏味的东西。在这里，使用'''list-style-image'''来指示浏览器使用你的图片代替乏味的默认着重号。

Find some interesting bullet graphics and add the following code in your style sheet to add some jazzy bullets to your lists:

<pre>#sidebar ul {
 list-style-image: url(/wp-images/image.gif);
 }</pre>

Note that you could also use an absolute link rather than a relative link. Simply change the <tt>url(/wp-images/image.gif )</tt> to <tt><nowiki>url(http://example.com/wp-images/image.gif)</nowiki></tt>.

找一些有趣的着重图片然后把下面的代码加入你的样式表，来加入一写好看的着重号到你的列表中：

<pre>#sidebar ul {
 list-style-image: url(/wp-images/image.gif);
 }</pre>

注意你也可以使用绝对连接而不是相关连接。简单的把<tt>url(/wp-images/image.gif )</tt>改为<tt><nowiki>url(http://example.com/wp-images/image.gif)</nowiki></tt>就可以了

===Adding a Border to Your List===

To add a border, like an underline, after your title, you can simply add a border style to the top of the <tt>ul</tt> under the title, rather than on the title itself.

<pre>#sidebar ul ul {...; border-top: solid 1px blue; ....}</pre>

===跟你的列表添加边框===

想添加边框，如标题之后的下划线，你可以简单的加入一个边框样式到<tt>ul</tt>的顶部，标题下边，而不是在标题本身上添加。

<pre>#sidebar ul ul {...; border-top: solid 1px blue; ....}</pre>

Go a step further and add a whole box around your list with the title sitting atop it:

<pre>#sidebar ul ul {...; border: solid 1px blue; ....}</pre>

更深一步的添加一个带有上方标题的整个围绕列表的方框：

<pre>#sidebar ul ul {...; border: solid 1px blue; ....}</pre>


Add a colored background to your list along with its new border:

<pre>#sidebar ul ul {...; border-top: solid 1px blue;
     background:#CCFFFF; ....}</pre>

给你的列表连同新的边框一起添加彩色背景：

<pre>#sidebar ul ul {...; border-top: solid 1px blue;
     background:#CCFFFF; ....}</pre>

And your end result would look like this:

<div style="padding: 10px"><span style="font-size:115%; font-style: italic; font-weight:bold; color: navy">Category Title</span>
<div style="width:30%; border: solid 1px blue; background:#CCFFFF; color: blue; padding: 5px">Category One
Category Two
Category Three</div></div>

你的最终结果可能显示如下：

<div style="padding: 10px"><span style="font-size:115%; font-style: italic; font-weight:bold; color: navy">Category Title</span>
<div style="width:30%; border: solid 1px blue; background:#CCFFFF; color: blue; padding: 5px">Category One
Category Two
Category Three</div></div>

Or really expand the possiblities to something like this:

<div style="width: 30%; border-top: 20px solid #CC6600; border-left: 30px solid #CC6600"><span style="font-size:130%; font-style: italic; font-weight:bold; color: #660000">Category Title</span>
<div style="border-top: solid 5px black; border-left: solid 10px black; background:#FFFF00; color: navy; padding: 5px; font-size: 105%; font-weight: bold">Category One
Category Two
Category Three</div></div>

或者也可能扩展成这样：

<div style="width: 30%; border-top: 20px solid #CC6600; border-left: 30px solid #CC6600"><span style="font-size:130%; font-style: italic; font-weight:bold; color: #660000">Category Title</span>
<div style="border-top: solid 5px black; border-left: solid 10px black; background:#FFFF00; color: navy; padding: 5px; font-size: 105%; font-weight: bold">Category One
Category Two
Category Three</div></div>

You can have a lot of fun with your list bullets and list layouts.  If you are having trouble with your bullets and lists, check out the resources listed below and then visit the [http://wordpress.org/support/ WordPress support forums] to get more help.

你可以从列表设计和着重号上找到很多乐趣。如果你有困难，查看下面列出的资源然后访问[http://wordpress.org/support/ WordPress 支持论坛]获得帮助。

==Troubleshooting Nested Lists==

If you are having trouble with your nested lists, the following might provide the solution. Also check [[WordPress:CSS Troubleshooting]] for more styling help issues.

==发现并解决嵌套列表问题==

如果你对你的嵌套列表有疑问，下面的内容可能提供了一些解决方法。同样查看[[WordPress:CSS Troubleshooting|CSS问题解决]]以获得更多有关样式的帮助。

===Improper Tag Structure===

The number one cause for errors or non-validation within a nested list is the lack of proper list structure. Here is a very simplified and correct nested list layout.  Note that when a new list begins (nested), the <tt>&lt;/li></tt> at the end of the last list item '''is not closed'''.  It is left open until the new nested list is completed, and then closed.

===不合适的标签结构===

导致嵌套列表中的错误或者是non-validation的首要原因就是缺少合适的列表结构。这里是一个很简单的正确的嵌套列表设计。注意当一个新的列表形成(嵌套)的时候，最后一个列表项结束的地方<tt>&lt;/li></tt>'''不是闭合的'''。它是开放的，直到新的嵌套列表完成，然后闭合。

<pre><ul>
   <li>Category One</li>
   <li>Category Two     &lt;----Note: No Closing List Tag
      <ul>
          <li>Sub-Category One</li>
          <li>Sub-Category Two     &lt;----Note: No Closing List Tag
              <ul>
                 <li>Sub-Sub-Category One</li>
                 <li>Sub-Sub-Category Two</li>     &lt;----Note: Closing List Tag
              </ul></li>           &lt;----Note: Nested List Closed
           <li>Sub-Category Three</li>
      </ul></li>       &lt;----Note: Nested List Closed
    <li>Category Three</li>
</ul>      &lt;----Note: End of entire list</pre>

===Template Tag Lists===

Different [[WordPress:Template Tags]] used within lists have different ways of using and relying upon list tags.  Some tags automatically include the <tt>UL</tt> and <tt>LI</tt> so all you have to do is include the tag in the list by itself and it will do all the work.  Other tags require the <tt>UL</tt> to be in place followed by the template tag and it generates its own <tt>LI</tt> tags.  Other template tags require designating which type of list tags are needed or use none at all if not listed in the tag's parameters.

===模板标签列表===

列表中使用的不同的[[WordPress:Template Tags|模板标签]]有不同的使用方法并且依赖于列表标签。一些标签自动包含<tt>UL</tt> 和 <tt>LI</tt>，这样你所需要做的就是把标签放进列表，它就会做好一切工作。一些标签需要通过模板标签把<tt>UL</tt>放在合适的，然后它会生成它自己的标签。一些标签要求指明，如果没有在标签参数中列出的话，哪种列表标签形式是需要的或者完全不需要的，

If you are having trouble with your nested lists when using template tags like [[WordPress:Template Tags/wp_list_cats|wp_list_cats]] or [[WordPress:Template Tags/wp_list_pages|wp_list_pages]], check their paramaters to see how they use the list tags and compare it with your usage.

如果你在使用模板标签时，如[[WordPress:Template Tags/wp_list_cats|wp_list_cats]] or [[WordPress:Template Tags/wp_list_pages|wp_list_pages]]，对你的嵌套列表产生了什么问题，查阅它们的参数，看看它们如何使用列表标签，与你的使用方法做做比较。

===Parent/Child Relationships===

Discussed in [[WordPress:CSS_Troubleshooting#The_CSS_Parent_and_Child_Relationship|The CSS Parent and Child Relationship]], lists are one of the big culprits.  Styles in the child list items are influenced by its "parents".  If the parent's list style features the color "red" and you want the children to be in "blue", then you need to specify the color in the children's list styles to be "blue" so they will override the parent's style

===父/子关系===

在 [[WordPress:CSS_Troubleshooting#The_CSS_Parent_and_Child_Relationship| CSS 父和子的关系]]中讨论过的，列表是很多故障出现的原因之一。子列表项的样式受它的"父"列表的影响。如果父级的列表样式使用了"红色"，而你想让子列表使用"兰色"，那么你需要在子列表样式中进行设置，这样它们才会不受父列表的影响。

Nested lists within the WordPress Sidebar typically contain links.  Therefore, while you can style the list as much as you want, the style for links will override the list style.  You can control the way the links in the list work by giving them a specific style class of their own, including their hover attributes:

<pre>#sidebar a {attributes}
#sidebar a:hover {attributes}
#categories a {attributes}
#categories a:hover {attributes}
#archives a {attributes}
#archives a:hover {attributes}</pre>

WordPress边栏中的嵌套列表通常包括连接。这样，当你设计你想要的列表时，连接的样式将不受列表样式影响。你可以通过给出一个特定的样式，来控制列表中的连接的样式，包括它们的属性：

<pre>#sidebar a {attributes}
#sidebar a:hover {attributes}
#categories a {attributes}
#categories a:hover {attributes}
#archives a {attributes}
#archives a:hover {attributes}</pre>

== Resources ==

* [[WordPress:Creating Horizontal Menus]]
* [[WordPress:Dynamic Menu Highlighting]]
* [[WordPress:Customizing Your Sidebar]]
* [[WordPress:Site Architecture 1.5]]
* [[WordPress:Stepping Into Template Tags]]
* [http://www.alistapart.com/articles/taminglists/ Taming Lists]
* [http://css.maxdesign.com.au/listamatic/ Listamatic]
* [http://www.yourhtmlsource.com/stylesheets/csstext.html CSS Text Formatting]
* [http://www.w3.org/TR/REC-CSS2/generate.html W3.org's CSS-2 - Generated Content, Automatic Numbering, and Lists]
* [http://www.davesite.com/webstation/css/chap07.shtml Cascading Style Sheets Interactive Tutorial for Beginners: Lists]
* [http://www.maxdesign.com.au/presentation/definition/index.cfm Max Design's Definition lists - Misused or Misunderstood?]
* [http://www.cameraontheroad.com/?p=160 CSS Unleashed - Experiments with Lists, Menus, Tables of Content, and More]
* [http://www.simplebits.com/notebook/2003/10/19/styling_nested_lists.html Simplebits' Style Nested Lists]

== 资源 ==

* [[WordPress:Creating Horizontal Menus|创建水平菜单]]
* [[WordPress:Dynamic Menu Highlighting|动态菜单高亮]]
* [[WordPress:Customizing Your Sidebar|定义边栏]]
* [[WordPress:Site Architecture 1.5|站点结构 1.5]]
* [[WordPress:Stepping Into Template Tags|走进模板标签]]
* [http://www.alistapart.com/articles/taminglists/ 驯服列表]
* [http://css.maxdesign.com.au/listamatic/ Listamatic]
* [http://www.yourhtmlsource.com/stylesheets/csstext.html CSS 文本格式]
* [http://www.w3.org/TR/REC-CSS2/generate.html W3.org's CSS-2 – 生成的内容, 自动计数, 和列表]
* [http://www.davesite.com/webstation/css/chap07.shtml 初学者层叠样式表交互指南:列表 ]
* [http://www.maxdesign.com.au/presentation/definition/index.cfm Max Design的定义列表 - 误用或误解?]
* [http://www.cameraontheroad.com/?p=160 CSS Unleashed - 列表, 菜单, 表格和内容以及更多的使用经验]
* [http://www.simplebits.com/notebook/2003/10/19/styling_nested_lists.html Simplebits的嵌套列表设计]