html - 将 CSS Badge 并排 float 我想我想 float

Question

我想知道如何在页脚菜单中将我的所有徽章并排 float 。到目前为止，我有四个徽章，但最多可能有六个。徽章是我的 SSL、AVG、BBB 等……我对所有这些网站 build 的东西都非常陌生。我使用 Joomla 3.1 并使用付费的最新模板。我可以看到所有代码并添加徽章，但它们总是相互重叠弹出。我有一个人帮助我，但他们是在 table 上做的，并告诉我它会起作用，但这不是正确的方法。请记住，在帮助我时，我是一个第一次学习着色的 child :) 感谢我能够提供的任何帮助。

如果您查看此页面的底部 (http://www.jcluforever.com/J-ADORE-GOD-CHRISTIAN-T-SHIRT-p/ts-jdrgod-prp.htm)，您会发现他们拥有用于付款、SSl 和前期的徽章；这就是我想要我的排列方式，我只希望我的在页脚中，我有 5 个我要添加的我想知道的是 https://www.paypal.com/webapps/mpp/paypal-popup','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=是的，宽度=1060，高度=700');返回假；”>

下一个是

<div id="avgthreatlabs_safetybadge_small"><noscript><a href="http://www.avgthreatlabs.com?utm_source=H&utm_medium=NA&utm_campaign=SSBW" target="_blank">AVG Threatlabs</a></noscript></div><script language="javascript" src="https://api.avgthreatlabs.com/static/js/security_s.js"></script>

接下来是

<!--- DO NOT EDIT - GlobalSign SSL Site Seal Code - DO NOT EDIT ---><table width=130 border=0 cellspacing=0 cellpadding=0 title="CLICK TO VERIFY: This site uses a GlobalSign SSL Certificate to secure your personal information." ><tr><td><span id="ss_img_wrapper_110-55_flash_en"><a href="http://www.globalsign.com/" target=_blank title="SSL"><img alt="SSL" border=0 id="ss_img" src="//seal.globalsign.com/SiteSeal/images/gs_noscript_110-55_en.gif"></a></span><script type="text/javascript" src="//seal.globalsign.com/SiteSeal/gs_flash_110-55_en.js" ></script><br /><a href="http://www.globalsign.com/" target=_blank  style="color:#000000; text-decoration:none; font:bold 8px arial; margin:0px; padding:0px;">GlobalSign SSL Certificates</a></td></tr></table><!--- DO NOT EDIT - GlobalSign SSL Site Seal Code - DO NOT EDIT --->

依此类推，直到我放置所有我想要或可以或需要的徽章。我不确定您需要的模板的哪一部分很短，或者有人告诉我所谓的 LESS

Answer 1

最佳做法是将这些徽章嵌套在无序列表中。每个徽章都在一个列表项中。对于此示例，假设每个徽章只是一个图像。试试这个:

<ul class="my-list">
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
</ul>

然后，在你的样式表中，写:

.mylist {
   list-style:none;
} 

.mylist li {
    float:left;
}

这会将您的所有元素 float 到页面左侧，并将列表元素“堆叠”在彼此旁边，而不是彼此重叠。