+ -
当前位置:首页 → 问答吧 → 大家帮忙看看这个如何实现 有图

大家帮忙看看这个如何实现 有图

时间:2010-10-09

来源:互联网

昨天试了一下 只能FF下面实现

如图 两边的线条高度是固定的 但是文字的大小和数量是自适应的~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <style> *{ margin:0;padding:0} body{ font-size:14px;} h4{border-left:2px solid #00b6bf; border-right:2px solid #00b6bf;height:10px;padding:0 5px; text-align:center; display:inline-block; margin:20px; position:absolute} h4 span{ position:relative; font-size:14px;top:-3px;} .title{ position:relative; width:300px; margin:30px auto} </style> </head> <body> <div class="title"> <h4><span>看看文字长度</span></h4> </div> </body> </html>
 提示:您可以先修改部分代码再运行

附件

试试.jpg (1.82 KB)

2010-10-9 09:41

作者: chiyuderen   发布时间: 2010-10-09

关注一下

作者: xiaoc3   发布时间: 2010-10-09