浮动 CSS 徽章彼此相邻 我想我想浮动

Question

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

如果您查看此页面底部（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, directory=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;
}

这会将您的所有项目浮动到页面左侧，并将列表项目“堆叠”在彼此旁边，而不是彼此顶部。

Answer 2

学习网页设计是一个需要耐心、奉献精神以及比您想象的更多的反复试验的过程。它与学习一门新的口语并没有完全不同，只是你不是学习一种，而是学习几种，然后学习如何让它们一起工作以创造你想要的东西。如果您对此不感兴趣，并且您只想运营您的网站或在线业务，那么我会考虑聘请网页设计师或公司来维护为您的业务提供动力的代码；但是，如果学习是你真正想做的事，那就去读吧！

HTML

HTML 或超文本标记语言是您为向浏览器提供数据而编写的代码。基本了解 HTML 的工作原理并不复杂。我不打算在这里解释整个事情，而是here is a great beginner tutorial。

CSS

CSS 或级联样式表是您使用的另一种语言，用于告诉浏览器您的数据应该如何显示。它的重量很轻，而且几乎只是简单的英语。 Here is an easy to follow guide to CSS.

如果您阅读了这两个指南，并自己做一些实验，相信您将能够自己解决问题。一旦你掌握了 HTML 和 CSS 的基础知识，还有很多东西要学，但是一旦你掌握了基础知识，你就会处于一个更好的位置来学习更多东西。

编码愉快，玩得开心！