div边框线上添加文字

最新推荐文章于 2024-09-27 11:28:03 发布

十一路客

最新推荐文章于 2024-09-27 11:28:03 发布

阅读量1.5w

点赞数

分类专栏： css 文章标签： CSS

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

方法一：用fieldset 存在浏览器可能不支持的风险
网址：http://blog.csdn.net/ge_yulong/article/details/8137790

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
* {
    font-size:12px;
    margin:0;
    padding:0; 
} 
fieldset.test {
    padding:10px;
    margin:10px;
    width:270px;
    color:#333; 
    border:#06c solid 1px;
} 
legend {
    color:#06c;
    padding:5px 10px;
    font-weight:800; 
    /*background:white;*/
} 
ul {
    list-style-type: none;
    margin:8px 0 4px 0;
} 
li {
    margin-top:4px;
}
</style>
</HEAD>
<BODY>
<fieldset style="width:300px; height:100px;"> 
        <legend>生产信息 </legend> 
        <div>试一下 </div> 
    </fieldset>
<fieldset class="test"> 
<legend>CSS网页布局</legend> 
    <ul> 
   <li>哈哈哈哈哈哈哈哈哈哈哈哈</li> 
   <li>哈哈哈哈哈哈哈哈哈哈哈哈</li> 
   <li>哈哈哈哈哈哈哈哈哈哈哈哈</li> 
   <li>哈哈哈哈哈哈哈哈哈哈哈哈</li> 
    </ul> 
</fieldset>
</BODY>
</HTML>

方法二：百度知道
这个可以通过相对定位使某元素恰好处在div的边框上的方式来实现
position:relative;
下面举例说明

1.创建Html

<div>
<span class="title">我是边框上的文字</span>
<span>我是边框内的文字</span>
</div>

2.设置css样式
div{
    width:200px;
    height:100px;
    padding:5px 30px;
    margin:50px;
    border:4px solid #ebcbbe;
}
span.title{
    display:block;
    width:150px;
    height:30px;
    position:relative;
    top:-15px;
    text-align: center;
    background: white;
}