Question

我正在尝试建立一个响应式网站，并列出了我的网站上接受的6张信用卡，这些信用卡显示在ul中，作为卡接受的徽标。

在徽标之后，我有一个弹出窗口的链接，提供有关接受的卡类型的更多信息。

代码如下所示。

＆＃13;

.icon-list,
.icon-list li{
  display:inline-block;
}

＆＃13;

<div class="card-icons">
    	<ul class="icon-list horizontal">
    		<li class="icon icon-card-visa">
    			//visa icon
    		</li>
    		<li class="icon icon-card-visa-debit">
    			//visa debit icon
    		</li>
    		<li class="icon icon-card-mastercard">
    			//mastercard icon
    		</li>
    		<li class="icon icon-card-american-express">
    			//american express icon
    		</li>
    		<li class="icon icon-card-maestro">
    			//maestro icon
    		</li>
    	</ul>
    	<a href="/help-page/credit-cards" target="_blank">
    		//help icon
    	</a>
    </div>

＆＃13;

我可以使用display：inline-block对齐较大的视口，将弹出窗口与图标列表对齐。当我进入移动视口时，图标会在列表中包含2行，帮助徽标会堆叠在ul下面。如果您在完整尺寸视图中运行代码段，然后将窗口缩小到移动视口大小，您将看到问题。

如何解决此问题，以便帮助图标始终位于图标列表旁边，而无需将帮助图标添加到卡列表中？

N.B我无法更改图标列表的内容。

Answer 1

试试这个设计！您还可以从我的Github存储库中分叉设计代码

ul{
margin:0;
padding:0;
display:block;
}

li{
float:left;
list-style:none;
padding:10px 5px;
}

<div>
  <h3>Useful informations</h3>
  <p>Some informations you need to know.</p>
  <h4>Payments Method</h4>
  <ul class="list-inline">
    <li><img src="http://i.imgur.com/QwpoxK2.png" alt="paypal"></li>
    <li><img src="http://i.imgur.com/HibdwbY.png" alt="discover"></li>
    <li><img src="http://i.imgur.com/6key80n.png" alt=""></li>
    <li><img src="http://i.imgur.com/Dt1meTr.png" alt=""></li>
    <li><img src="http://i.imgur.com/0jW3wVM.png" alt=""></li>
    <li><img src="http://i.imgur.com/EvzaxAf.png" alt=""></li>
  </ul>
</div>

包裹<ul>

1 个答案: