Fwolf’s Blog

update @ 2007-04-10

让对象居中，只需要一句css：margin: auto;，感谢dNgpNg和heiyo的指正。下面是我自己瞎找的笨办法，仅供大家开拓一下思路。

–

利用css让对象居中，比如是一个div，有人说这还不简单？不就是text-align: center么？其实不对，这只是让对象所包含的内容居中，而不是让对象本身居中，其实，我还没有找到能够直接让div等块div对象居中的css方法，不过从Computing.Net找到了一个替代方案：

比如一个div，宽度设定为60%，那么要使他居中，笨的方法就是用另外一个带有text-align: center属性的div或其他容器包含它，聪明一点的办法是这样：

左缩进20%加上div本身的宽度60%是80%，剩余的右缩进自然就是20%，所以div看起来就像是居中了一样。

第二个问题是编号列表，如何实现像word或者openoffic那样自动层级的编号？先看我实现的例子吧：

看到没有，在上面这个例子中，有着两级编号，并且和一般html中的<ol>不同的是，两级编号是连续的，并且在标题中可以定制编号的样式。为了让大家看得更清楚，我把代码贴出来。不要想着用查看源代码的方式来观察，由于Wordpress有自动纠错功能，会自动把嵌套的<ol>给补全，所以我改成用javascript+String.fromCharCode(n)方式输出了，查看不方便。

<style type="text/css" media="screen">
<!--
#number_list {counter-reset: c_level1}
#number_list ol {counter-reset: c_level2}
#number_list li {list-style-type: none;}
#number_list li:before {display: marker; content: "§ " counter(c_level1, decimal) "、"; counter-increment: c_level1 1}
#number_list ol li:before {display: marker; content: "§ " counter(c_level1) "." counter(c_level2, decimal) "、"; counter-increment: c_level2 1}
-->
</style>
<ol id="number_list">
    <li>大标题一</li>
    <ol>
        <li>小标题1</li>
        <li>小标题2</li>
    </ol>
    <li>大标题二</li>
</ol>

现在清楚了吧，用display: marker和:before来定义列表项目前面显示的内容，用counter来定义计数器，用content定义要显示的形式，用counter-increment定义计数器自增值，用counter-reset定义计数器归零的条件，就可以实现复杂公文处理系统中的可定制多级编号了，在Firefox2中测试通过，不保证在IE下能用。更详细的资料，请查询W3C的CSS文档。

什么？不知道word和openoffice的多级编号？Orz…自行放狗搜索吧。

No tags for this post.

Related posts

• No related posts.

This entry was posted on Sunday, April 1st, 2007 at 1:54:05 and is filed under Web Frontend. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.