materialize - Append <li> elements to <ul> with javascript looks different

Question

I have a simple list with icons in my website:

      <ul id="_actions_list" class="right" style="padding-right: 20px">
        <li style="display: inline">
            <a id="_back_button" class="hoverable waves-effect waves-light btn-floating blue">
                  <i class="material-icons">fast_rewind</i>
            </a>
        </li>
          <li style="display: inline">
            <a id="_reset_button" onmouseover="this.style.cursor='pointer'"
             class="hoverable waves-effect waves-light btn-floating red">
                <i class="material-icons">replay</i>
            </a>
          </li>
     // somo more icons

that looks so

but when I add new list elements with append, the padding is different

Can anybody explain why this and how to fix?

thanks in advance

question from:https://stackoverflow.com/questions/65840699/append-li-elements-to-ul-with-javascript-looks-different

Answer 1

Waitting for answers