角度材料Md分隔线

时间:2017-02-20 21:16:01

标签: css angularjs angular-material

是否可以让按钮位于md-divider之上: enter image description here

1 个答案:

答案 0 :(得分:2)

这与Angular无关,你可以通过纯css修复它:

body{
                background-color: #E0E0E0;
                text-align: center;
            }
            h1{
                font-size: 75px;
            }
            hr{
                width: 85%;
            }
            .buttons{
                display:inline-block;
                position:relative;
                top:-20px;
                background-color: green;
                color: white;
                padding: 5px;
                border: 1px solid green;
                border-radius: 50px;
                text-align: center;
            }
            .buttons:hover{
                background-color: #C4C4C4;
                border: 1.5px solid #171717;
            }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<h1>Button on top of line</h1>
     <hr>
     <span class="buttons fa fa-plus"></span>

你可以给你的Md-divider一个班级而不是我的hr例子。但你明白了吗?

重点是使用负顶部定位。