css实现中间文字 两端横线的两种方法(使用标签)

根据题意要实现的效果如图:


image.png

要使用标签,那就是 fieldset 和 legend

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css实现中间文字 两端横线的两种方法</title>
    <style>
        fieldset {
            border: none;
            border-top: 1px solid #ccc;
            text-align: center;
            width: 240px;
            margin: 0 auto;
        }
        legend {
            padding: 0 10px;
            color: #ccc;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <fieldset><legend><span>登录</span></legend></fieldset>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,868评论 1 92
  • HTML5 标签comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。为代码编写注释的好处是...
    才気莮孒阅读 4,132评论 1 25
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,410评论 1 41
  • HTML5< !--...--> 标签 comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。...
    野小宝阅读 1,355评论 0 10
  • 1、抽烟?我想抽你 中国社会传统观念里,一个男人不会抽烟都没资格说自己爷们,哪怕吸到肺破碎也要一根一根往死里抽,但...
    写手墨菲阅读 285评论 0 0