时间戳

首页 > 解决方案 > 在材质工具栏上水平显示 css 线

css - 在材质工具栏上水平显示 css 线

问题描述

我想在“材质工具栏”上放置一条水平图标分隔线，但它始终垂直显示。这是代码：

<mat-toolbar color="primary">
<mat-toolbar-row>
    <a> <img src="https://img.icons8.com/material-sharp/96/000000/link.png" class="logo" alt="logo" /></a>
    <span class="example-spacer"></span>
    <span flex></span>
    <div>
        <div class="md-toolbar-tools menu">
            <a mat-button class="home"> <img
                    src="https://img.icons8.com/material-sharp/24/000000/cloud-network.png"></a>
            <a class="cp"> <img src="https://img.icons8.com/material-sharp/24/000000/cloud-network.png"></a>
            <a mat-button class="p"> <img
                    src="https://img.icons8.com/material-sharp/24/000000/cloud-network.png"></a>
            <a mat-button class="cl"> <img
                    src="https://img.icons8.com/material-sharp/24/000000/cloud-network.png"></a>
             <div class="separation-line"></div> 
            <a mat-button class="mu"> <img
                    src="https://img.icons8.com/material-sharp/24/000000/cloud-network.png"></a>
        </div>
    </div>
</mat-toolbar-row>

标签： cssangular-materialiconstoolbar

解决方案

HTML 有一个内置的水平规则标记 ( <hr>)。您可以在此处了解更多信息。

推荐阅读