インライン支払いアイコン

Question

私は自分のウェブサイトのフッターにSVG支払いアイコンを使用しています。しかし、私はそれらをインライン化したい。私はCSSで遊んでみましたが、まだ何も起こっていません。現在、アイコンはリストとして表示されます。どうすればそれらをインライン化できますか？ここで

はフッターのコードです：

<footer class="page-footer variant4 fullboxed"> 
    <div class="footer-bot"> 
     <div class="container"> 
      <div class="footer-nav"> 
      <ul> 
       {% for link in linklists[settings.footer_nav]links %} 
        <li>{{ link.title | link_to: link.url }}</li> 
       {% endfor %} 
      </ul> 
      </div> 
     {% unless shop.enabled_payment_types == empty %} 
     {% assign payment_icons_available = 'amazon_payments,american_express,apple_pay,bitcoin,cirrus,dankort,diners_club,discover,dogecoin,dwolla,forbrugsforeningen,interac,jcb,litecoin,maestro,master,paypal,visa' | split: ',' %} 
     <div class="payment-icons"> 
      {% for type in shop.enabled_payment_types %} 
      {% if payment_icons_available contains type %} 
       {% assign icon_name = type | prepend: 'icon-' %} 
       {% include icon_name %} 
       {% endif %} 
      {% endfor %} 
     </div> 
     </div> 
    {% endunless %} 
    </div> 
</footer> 

そして、ここでは、CSSです：

.payment-icons { 

    width: 50px; 
    margin: auto; !important; 

} 

Answer 1

あなたは現在、各SVGの幅（は50px）を制御するためにSVG要素のコンテナに頼っていますこれは、各SVGが互いに隣り合って流れることを不可能にする。コンテナー（div.payment-icons）が外部コンテナーの100％になるようにCSSを調整し、各SVGエレメントを具体的に50ピクセル幅に調整します。各SVGアイコンがリスト項目のコンテナを持つように、あなたのフッターのHTMLを調整し、完全にスペースアウトあなたのSVGのアイコンをするために

svg:not(:root) { 
    overflow: hidden; 
    display: inline-block; 
    width: 50px; 
} 

.payment-icons { 
    width: auto; 
    margin: auto; 
} 

：ここから、空間にページ全体でSVGのアイコンを追加CSSを追加することができます。

svg:not(:root) { 
    overflow: hidden; 
    display: inline-block; 
    width: 50px; 
    margin: 0 auto; 
} 

.payment-icons { 
    // nothing should be needed here, unless you want negative margins to have the left-most and right-most icons to be against the "wall" of the container 
} 
.payment-icons ul { 
    display: table; 
    width: 100%; 
    list-style-type: none; 
    padding: 0; 
    margin: 0 auto; 
} 
.payment-icons ul li { 
    display: table-cell; 
    vertical-align: middle; 
} 

更新、モバイル：

<div class="payment-icons"> 
    <ul> 
     {% for type in shop.enabled_payment_types %} 
     {% if payment_icons_available contains type %} 
     <li> 
      {% assign icon_name = type | prepend: 'icon-' %} 
       {% include icon_name %} 
      {% endif %} 
     </li> 
     {% endfor %} 
    </ul> 
</div> 

は、その後、次のCSSを含める

@media (min-width: 300px) { 
    svg:not(:root) { 
     overflow: hidden; 
     display: inline-block; 
     width: 100%; 
     margin: 0 auto; 
    } 

    .payment-icons { 
     width: auto; 
     margin: auto; 
    } 
    .payment-icons ul { 
     display: table; 
     width: 100%; 
     list-style-type: none; 
     padding: 0; 
    } 
    .payment-icons ul li { 
     display: table-cell; 
     vertical-align: middle; 
     padding: 0 5px; 
    } 
} 

// tablet+ 
@media (min-width: 767px) { 
    svg:not(:root) { 
     width: 50px; 
    } 

    .payment-icons ul { 
     width: 25%; 
    } 
    .payment-icons ul li { 
     padding: 0; 
    } 
} 

Answer 2

追加してみてください：

.payment-icons 
    width: 100%; 


.icon 
    display: inline; 
    width: 10%; 
    vertical-align: middle; 

私はインスペクタであなたのウェブサイト上でそれをテストし、それが働きました。