WordPress:Styling Lists with CSS

When presenting lists of things, WordPress:WordPress uses standard XHTML elements:

• <ol> for an Ordered List (where the order of items is important, so items are numbered)
• <ul> for an Unordered List (normally shown as items with bullets)
• <li> for each item in a list, ordered or unordered.

当显示列表内容时，WordPress使用标准的XHTML元素：

• <ol> for an Ordered List (where the order of items is important, so items are numbered)
• <ul> for an Unordered List (normally shown as items with bullets)
• <li> for each item in a list, ordered or unordered.

By default, most lists (and some list items) in WordPress are identified by id or class attributes, making styling lists easy. With fairly simple changes to the style.css file, you can display the list horizontally instead of vertically, feature dynamic menu highlighting, [[WordPress:#Styling_the_Bullet|change the bullet]] or numbering style, remove the bullets altogether, or any combination of these.

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

WordPress 1.5 Nested Lists Layout

With the innovation of Themes in WordPress v1.5, different themes format lists in different ways. The most common lists users often want to modify in WordPress are the sidebar menu lists. Since many sidebars feature nested lists, let's look at those in more depth.

WordPress 1.5 嵌套列表设计

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

Begin by examining the style.css file found within the Theme's folder you are using. Most WordPress Themes label their sidebar menu section with the words sidebar, menu, or a combination of both. So, look for the sidebar Template file, typically called sidebar.php. This is a sample sidebar.php layout; your version may be different, but the concept will be the same.

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

<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>

When you are working with nested lists and you want an individual style for each list, you have to recreate the "nest" in the stylesheet (style.css).

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

#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}

ul

The first style (#sidebar ul) 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 #sidebar li 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 #sidebar ul li 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 CSS ID. In the above example, after the #search section, the first nested list is #pagenav. If you use WordPress:Pages this is where the list of WordPress:Pages would be generated. Since WordPress:Pages work outside of 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 #pagenav.

ul ul li

The #sidebar ul ul li applies style to the links within the #sidebar ul ul to help customize the look of this list. Again, if you have customized the #pagenav list, it will be different from the rest of your nested list items.

ul ul ul li

The #sidebar ul ul ul li is the style for the sub-sub-list. If you have a list of categories with subcategories, the 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

第一个样式(#sidebar ul)设置整体列表的外观. 通常包含整个列表的页边空白和填充样式，也可能包含字体库，颜色和别的内容。

li

#sidebar li 分配样式给现有的列表项目. 这里你可以设置是否包含bullet 符号，你也可以改变字体，自号，或者颜色，你还可以加入边线.

ul li

#sidebar ul li确定第一个嵌套类表的样式. 每个第一级嵌套列表都在这里制定,但是如果它们有详细的CSSID的话，你可以设计每个嵌套的子列表。上述例子中，#search 部分之后, 第一级嵌套列表是#pagenav. 如果你使用页面，这里是页面的列表生成的地方。因为 页面工作在WordPress循环之外, 并且通常高亮显示特殊的信息比如"About Us", "Contact", and "Site Map", 你可能想通过把关于WordPress:Pages外观特殊信息输入#pagenav来设计页面，使它的样式与列表的其他部分不同.

ul ul li

#sidebar ul ul li在#sidebar ul ul中提供了连接的样式 以帮助定义列表的外观。另外，如果你已经定义了#pagenav列表，将会和你剩下的的嵌套列表不同。

ul ul ul li

#sidebar ul ul ul li是二级子表的样式。如果你有一个带有子类的分类列表，分类 标题将是列表的第一级，分类是第二级，而任何子类将是第三级，或者是子表，如下面的例子。一些设计者喜欢在第三级使用一些较小的字体，不同的符号，或者不同的颜色，高亮显示，以区别它们上一层的项目：

• Category Title
  • Category One
  • Category Two
    • Sub-Category One
    • Sub-Category Two
  • Category Three

Styling Specific List Items

Do you want your Categories List to look different from your Archives List? Then open up the index.php or sidebar.php and carefully add the following style references to the appropriate list item:

<li id="categories"><h2>Categories</h2>.....

<li id="archives"><h2>Archives</h2>....

设计特定列表项目

你想让你的分类列表看起来与文档列表不同吗？打开index.php或者sidebar.php，仔细的加入如下样式参数来更改列表项目：

<li id="categories"><h2>Categories</h2>.....

<li id="archives"><h2>Archives</h2>....

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

#categories {attributes}
#categories ul {attributes}
#categories ul li {attributes}
#archives {attributes}
#archives ul {attributes}
#archives ul li {attributes}

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.

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

#categories {attributes}
#categories ul {attributes}
#categories ul li {attributes}
#archives {attributes}
#archives ul {attributes}
#archives ul li {attributes}

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

Styling individual items

If you want to use image replacement techniques to style your list, each LI tag will need its own class or ID. Try the Classy wp_list_pages plugin.

设计个别项目

如果你想使用图片替换技巧设计你的列表，那么每个LI标签需要它自己的类别或者ID，你可以试试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 disc. Other basic values are circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, and none. Let's change the default value to something else, like a square.

#sidebar li {
   list-style: square;
}

设计列表

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

#sidebar li {
   list-style: square;
}

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

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

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:

#sidebar li {
   list-style: none;
}

Now, anything tagged with <li>, within the DIV of the ID of #sidebar, 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.

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

#sidebar li {
   list-style: none;
}

现在，任何带有<li>的标签，#sidebar内的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 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.

使用图片代替着重号

厌倦了乏味的着重号吗？让我们用几个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:

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

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

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

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

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

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 ul under the title, rather than on the title itself.

#sidebar ul ul {...; border-top: solid 1px blue; ....}

跟你的列表添加边框

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

#sidebar ul ul {...; border-top: solid 1px blue; ....}

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

#sidebar ul ul {...; border: solid 1px blue; ....}

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

#sidebar ul ul {...; border: solid 1px blue; ....}

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

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

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

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

And your end result would look like this:

Category Title

Category One

Category Two

Category Three

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

Category Title

Category One

Category Two

Category Three

Or really expand the possiblities to something like this:

Category Title

Category One

Category Two

Category Three

或者也可能扩展成这样：

Category Title

Category One

Category Two

Category Three

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 WordPress support forums to get more help.

你可以从列表设计和着重号上找到很多乐趣。如果你有困难，查看下面列出的资源然后访问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.

发现并解决嵌套列表问题

如果你对你的嵌套列表有疑问，下面的内容可能提供了一些解决方法。同样查看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 </li> 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的首要原因就是缺少合适的列表结构。这里是一个很简单的正确的嵌套列表设计。注意当一个新的列表形成(嵌套)的时候，最后一个列表项结束的地方</li>不是闭合的。它是开放的，直到新的嵌套列表完成，然后闭合。

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

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 UL and LI 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 UL to be in place followed by the template tag and it generates its own LI 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.

模板标签列表

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

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

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

Parent/Child Relationships

Discussed in 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

父/子关系

在 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:

#sidebar a {attributes}
#sidebar a:hover {attributes}
#categories a {attributes}
#categories a:hover {attributes}
#archives a {attributes}
#archives a:hover {attributes}

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

#sidebar a {attributes}
#sidebar a:hover {attributes}
#categories a {attributes}
#categories a:hover {attributes}
#archives a {attributes}
#archives a:hover {attributes}

Resources

• WordPress:Creating Horizontal Menus
• WordPress:Dynamic Menu Highlighting
• WordPress:Customizing Your Sidebar
• WordPress:Site Architecture 1.5
• WordPress:Stepping Into Template Tags
• Taming Lists
• Listamatic
• CSS Text Formatting
• W3.org's CSS-2 - Generated Content, Automatic Numbering, and Lists
• Cascading Style Sheets Interactive Tutorial for Beginners: Lists
• Max Design's Definition lists - Misused or Misunderstood?
• CSS Unleashed - Experiments with Lists, Menus, Tables of Content, and More
• Simplebits' Style Nested Lists

资源

• 创建水平菜单
• 动态菜单高亮
• 定义边栏
• 站点结构 1.5
• 走进模板标签
• 驯服列表
• Listamatic
• CSS 文本格式
• W3.org's CSS-2 – 生成的内容, 自动计数, 和列表
• 初学者层叠样式表交互指南:列表
• Max Design的定义列表 - 误用或误解?
• CSS Unleashed - 列表, 菜单, 表格和内容以及更多的使用经验
• Simplebits的嵌套列表设计