技术标签 TAGS

专业技术精选

首页 > 技术 > 前端技术

文字标题自适应宽度

2011-02-15 15:40:10 by 【6yang】, 160 visits, 收藏 | 返回

源码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标题和线条自适应效果</title>
<style type="text/css">
body{
    padding:15px 0;
    margin:0;
    font:12px/1.5 Verdana, Geneva, sans-serif;
}

.nav{
    background:url(images/bg.jpg);
    border:1px solid #f30;
    width:800px;
    overflow:hidden;
    white-space:nowrap;
    height:24px;
    line-height:24px;
}
span.title {
    height:14px;
    font:12px/14px Arial, Helvetica, sans-serif;
    padding: 0 15px 0 0;
}
span.line { 
    background: url(images/line.gif) 0 8px repeat-x;
    padding:0px 0 0;
    height:14px;
    line-height:14px;
    white-space:nowrap;
}
span.line .content{
    display:inline-block;
    width:920px;
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>  
<div class="nav">
      <span class="title">标题标题标题标题标题标题标题标题标题标题</span><span class="line"><span class="content"></span></span>
</div>
</body>

</html>

测试效果:

http://www.6yang.net/myjavascriptlib/titleNav/index.html

 

分享到：
我要评论 本文来自:http://www.6yang.net/articles_view.php?id=890&cid=7
share

    图片原图

    loading

    loading