html - Materialize collection secondary bottom not aligning properly -


i trying align button secondary content within collection. however, no matter try, cannot button centered. see image below:

current layout

code snippet:

<div class="section">     <ul class="collection with-header">         <li class="collection-header">             <h5>drawing basics</h5></li>         <li class="collection-item">             <div>public policy , community<a href="#!" class="secondary-content"><i class="material-icons">delete</i><a href="#!" class="secondary-content"><i class="material-icons">edit</i><a href="#!" class="secondary-content"><i class="material-icons">remove_red_eye</i></a></div>         </li>         <li class="collection-item">              <div> introduction geology studies                 <button class="btn waves-effect waves-light right"> create                  </button>             </div>         </li>         <li class="collection-item">             <div> global perspective<a href="#!" class="secondary-content"><i class="material-icons">delete</i><a href="#!" class="secondary-content"><i class="material-icons">edit</i><a href="#!" class="secondary-content"><i class="material-icons">remove_red_eye</i></a></div>         </li>      </ul>  </div> 

what can solve this? i've tried everything.

well couldn't work i'd works hardcode....

.fix{   float: right;     margin-top: -8px; } 

https://jsfiddle.net/ggcewqal/2/


Comments

Popular posts from this blog

javascript - Create a stacked percentage column -

Optimising Firebase database by automatically overwriting data -

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -