Specific Placement of Shopify Payment Methods Liquid

[PaLa]

Hello everyone, 

I want to display my payment methods under my product directly. 

I have found this code from Shopify and it works, but not exactly how I want it to be. Let me show you; 

<style>
.icon {
  width: 3.125em;
}
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
</style>

{%- unless shop.enabled_payment_types == empty -%}
  <span class="visuallyhidden">Supported payment methods</span>

  <ul>
    {%- for type in shop.enabled_payment_types -%}
      <li>
        {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
      </li>
    {%- endfor -%}
  </ul>
{%- endunless -%}

And it looks like this; 

 

My question to you; is there any way the payment methods are displayed efficiently? So horizontally instead of vertically and without the bullet points? 

Thank you so much! 

[Finer]

@PaLa your going to have to add some CSS attributes to show the payment icons in a different way.

you could add following attributes to the visuallyhidden class

list-style-type:none;
display:flex;
flex-direction:row;

 But to help you more, I‘ll need more input about the desired design. 

[PaLa]

Hey Finer, something like that; 

(of course with all the payment options)

could you tell me what to do? That would be amazing, thank you.