Html 在线支付图标

我在我的网站的页脚中使用SVG支付图标。但是，我想把它们内联起来。我试着玩CSS，但还是什么都没发生。当前，图标显示为列表。我如何内联它们

以下是页脚代码：

{%用于链接列表中的链接[settings.footer_nav]links%}
{{link.title}link_to:link.url}
{%endfor%}

{%shop.enabled_payment_types==empty%}
{%分配支付图标可用='亚马逊支付，美国运通，苹果支付，比特币，cirrus，dankort，diners俱乐部，discover，dogecoin，dwolla，forbrugsforeningen，interac，jcb，litecoin，maestro，master，paypal，visa'.'拆分：'，'%}
{shop.enabled_payment_types%}
{%如果可用的付款图标包含类型%}
{%assign icon_name=type | prepend:'icon-'%}
{%include icon_name%}
{%endif%}
{%endfor%}
{%end除非%}

下面是CSS：

。付款图标{
宽度：50px；
保证金：自动；！重要；
}

您目前依靠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>

手机更新：

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

---

目前，您依赖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>

手机更新：

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

尝试添加：

.payment-icons 
   width: 100%;


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

我在inspector中在您的网站上测试了它，它成功了。

尝试添加：

.payment-icons 
   width: 100%;


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

---

我在inspector中在您的网站上测试了它，它成功了。

请注意，代码片段应该用于可运行的代码；当我点击RunCodeSnippet时，并没有发生太多事情。此外，如果您提供了呈现的HTML，则更容易重现您的问题；当我点击RunCodeSnippet时，并没有发生太多事情。另外，如果您提供了呈现的HTML，那么重现您的问题会更容易。您好，我尝试了您的第一个答案。它内联的图标，但他们不是完美的内联。我试着更新第二个答案中列出的页脚代码。他们以列表的形式回来了。你可以在网站上查看。一旦你更新了html，在更新下面添加我包含的CSS。我做了，注意到它们不是完全内联的。而且它们没有居中。它们应该是这样的：您希望图标跨越整个页面吗？您是否正在尝试为移动设备完成相同的设计？对于垂直对齐，我刚刚在LiCSS选择器中添加了“垂直对齐：中间”；它现在完全内联了。然而，当宽度从100%调整到35%时，它会回到页脚的左侧。它内联的图标，但他们不是完美的内联。我试着更新第二个答案中列出的页脚代码。他们以列表的形式回来了。你可以在网站上查看。一旦你更新了html，在更新下面添加我包含的CSS。我做了，注意到它们不是完全内联的。而且它们没有居中。它们应该是这样的：您希望图标跨越整个页面吗？您是否正在尝试为移动设备完成相同的设计？对于垂直对齐，我刚刚在LiCSS选择器中添加了“垂直对齐：中间”；它现在完全内联了。但是，当宽度从100%调整到35%时，它会回到页脚的左侧。