在材质工具栏上水平显示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>

解决方法

HTML具有内置的水平规则标记（<hr>）。您可以进一步了解here。