角材料MD-分頻器

Question

是否有可能得到一個按鈕上有點像這樣的MD-分壓器的頂部：

Answer 1

這是無關的角度，你可以通過純修復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類和用它來代替我小時的例子。但你明白了嗎？

重點是使用定位與負面的頂部。