CSS 分隔线中间带文字分隔符

最新推荐文章于 2025-06-12 16:31:02 发布

jiaweimin123

最新推荐文章于 2025-06-12 16:31:02 发布

阅读量9.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： html css 文章标签： html css 分隔线

本文链接：https://blog.youkuaiyun.com/jiaweimin123/article/details/78174912

html 同时被 2 个专栏收录

26 篇文章

订阅专栏

css

21 篇文章

订阅专栏

本文介绍了一个使用HTML和CSS实现的简单布局案例，包括样式设置和元素排列等关键信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML部分：

<div class="order">
        <span style="white-space:pre">   </span><span class="line"></span>
        <span style="white-space:pre">   </span><span class="txt">最近常用路线</span>
        <span style="white-space:pre">   </span><span class="line"></span>
    </div>

CSS部分：

.order {
    height: 60px;
    line-height: 60px;
    text-align: center;
}
.order .line {
    display: inline-block;
    width: 35%;
    border-top: 3px solid #82B3D5;
}
.order .txt {
    color: #555;
    vertical-align: middle;
}