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来隔离页面上的SVG图标：

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

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

为了完美地展开您的SVG图标，请调整页脚HTML，以便每个SVG图标都有一个列表项容器：

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

我在检查员的网站上对它进行了测试，但它确实有效。

内联付款图标

2 个答案: