网页设计中经常用到标题之间的分隔符的样式，即用短竖线分隔几个关键词，最近发现了一种简单可行的方式，即通过vertical-align属性来实现分隔符样式，在这边分享给大家：
<!doctype html><html><head> <title&加拿大歌曲红河谷gt;</title> <style> div { height: 60px; border: 2px solid orange; } span { display: inline-block; vertical-align: middle; height: 100%; background-color: red; font-size: 30px; line-height: 60px; } i { display: inline-block; vertical-align: middle; width: 2px; height: 30px; margin: 0 10px; background-color: bl教师节的英文ue; } </style></head><body> <div> <span>床前明月光</span><i></i><span>疑是地上霜</span><i></i><span>举六一居士头望明月</span><i></i><span>低头思故乡</sp三重门a金砂公园n> </div></body></html>这里的背景色和边框只是便于看出字体和父元素区域，可以直接去除，可通过调整<i>标签的高度（百分比也可）和样式来改变分隔符的样式。需要注意的是这些字的line-height和font-size属性需要在span中设置，如果在父元素中设置的话有可能会导致span和i标签的整体位置偏离出div，影响到页面布局。关于这点可参考
本文发布于:2023-04-07 09:49:08，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/0b96c63bef929769142de6a11dc531cb.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：利用vertical.doc
本文 PDF 下载地址：利用vertical.pdf
| 留言与评论（共有 0 条评论） |
