给WordPress文章中的代码加上滚动条

林继 WordPress 3,956 共写了333个字 (2010-12-31 20:30:28) 没有评论 打印 扫描二维码 百度已收录

找到Wordpress当前主题的style.css,搜索里面是否有pre的定义,如果没有,就自己添加,大致内容如下:

  1. pre {
  2.     width: 100%;
  3.     overflow: auto;
  4.     border: 1px dotted #281;
  5.     background-color: #eee;
  6.     padding-left: 6px;
  7.     padding-bottom: 20px;
  8. }

上面代码中的dotted定义了一个虚线的边框,并设定背景为灰色,左边的padding设置为6,要不然左边会显得比较拥挤,最关键的是overflow设置成auto,这个设置提供了自动显示滚动条的功能。特别需要注意的是padding-bottom,这个必须设在20px左右,目的是为滚动条留下一些空间。当滚动条隐藏时,这部分留白似乎显得比较多余,但如果不设,当滚动条出现时,滚动条就会遮盖部分文字,非常不舒服。

本文来自:http://blog.ipattern.org/archives/177

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

< >