在线支付图标

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 元素的容器来控制每个 SVG 的宽度 (50px)，这使得每个 SVG 无法彼此相邻流动。调整您的 CSS 以便容器 div.payment-icons 可以是外部容器的 100%，并将每个 SVG 元素调整到具体的 50px 宽度。从这里，您可以添加额外的 CSS 到 space 整个页面的 SVG 图标：

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

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

为了完美 space 出你的 SVG 图标，调整你的页脚 HTML 这样每个 SVG 图标都有一个 list-item 容器：

<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：

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;
}

更新，移动：

@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;

我在你的网站上用 inspector 测试了它，它成功了。

在线支付图标

Inline Payment Icons

html

css

shopify