html - css 如何让文字标题显示在边框上？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

html - css 如何让文字标题显示在边框上？

阿神 2017-04-17 11:49:52

[CSS3讨论组]

1177

如图，如何让文字标题显示在边框上？

阿神

闭关修行中......

全部回复(8)

怪我咯2017-04-17 11:51:52 8楼

 <fieldset>
    <legend>【使用方法】</legend>
  </fieldset>

赞 +0

添加回复

PHP中文网2017-04-17 11:51:52 7楼

如果需要更精确的扩展，fieldset的效果不好，还自己实现一个吧，如下：

<style>
    .box{
        position:relative;
        border:1px solid red;
    }
    .box::before{
        content:attr(title);
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        -webkit-transform:translate(-50%,-50%);
        padding:0 10px;
        background-color:#fff;
    }
</style>
<p class="box" title="使用方法">
    <ol>
        <li>这是啥</li>
        <li>干啥</li>
    </ol>
</p>

赞 +0

添加回复

ringa_lee2017-04-17 11:51:52 6楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<fieldset>
    <legend style="text-align: center">【使用方法】</legend>
</fieldset>
</body>
</html>

赞 +0

添加回复

PHPz2017-04-17 11:51:52 5楼

提供一种hacked方法：

style:

  p {
    width: 400px;
    height: 200px;
    border: 1px solid #ccc;
  }
  p h1 {
    height: 20px;
    margin: -10px auto 0;
    font-size: 14px;
    padding: 0 10px;
    text-align: center;
    width: 50px;
  }

html:

  <p>
    <h1>嘿嘿嘿</h1>
  </p>

赞 +0

添加回复

迷茫2017-04-17 11:51:52 4楼

随便想了一下，凑合着用吧
http://codepen.io/colahan/pen...

不太建议使用fieldset，一般都会被reset的

赞 +0

添加回复

伊谢尔伦2017-04-17 11:51:52 3楼

绝对定位加文字定宽高

赞 +0

添加回复

迷茫2017-04-17 11:51:52 2楼

很明显是绝对定位呀

赞 +0

添加回复

巴扎黑2017-04-17 11:51:52 1楼

<style>
    h2:before, h2:after {
        content: "";
        display: inline-block;
        vertical-align:middle;
        width: 100px;
        border-top: 1px solid #123456;
    }
</style>

<h2>线标题</h2>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>