带有图像的菜单和...的东西答案

【问题标题】：Menu with images and... thing带有图像的菜单和...的东西
【发布时间】：2015-12-08 16:31:46
【问题描述】：

所以，我想做一个这样的菜单：

http://i.stack.imgur.com/gfew2.png

但是！！！！我来不及了=( 看我的代码：

CSS：

 .abas {
background-color: rgba(100, 100, 100, 0.0);
height: 70px;
width: 1024px;
color: #616161;
font-size: 20px;
margin:0 auto;
text-align: center;
font-family: 'Roboto Slab Light', serif;
}

 .csq {
    position: relative;
    top: 45%;
    transform: translateY(-50%);
} 

 a { color: inherit; }

HTML：

<div class="abas"><div class="csq">
<a href="loja.html">LOJA</a>
<img src="Barratopo_assets/Bolinha.png">
<a href="catalogo.html">CATÁLOGO</a>
<img src="Barratopo_assets/Bolinha.png">
<a href="revenda.html">REVENDA!</a>
<img src="Barratopo_assets/Bolinha.png">
<a href="contato.html">CONTATO</a>
<img src="Barratopo_assets/Bolinha.png">
<a href="sobre.html">SOBRE NÓS</a>
</div></div>

然后它看起来像这样：

http://i.imgur.com/aCmpnhv.png

我猜我的代码是一团糟，但是……我是这个 html/css/thing 世界的新手，所以……你能帮帮我吗？（我也是这个英语世界的新手，对不起;-;）

哦，我想将“Loja”项目作为下拉菜单，所以...如果你也能帮助我，我会非常感激 c:

字典：洛哈：商店--- 目录：目录 --- 复仇！：转售！ --- 联系方式：联系方式--- Sobre nos: 关于我们 --- Bolinha.png：那个小红圈

【问题讨论】：

尝试使用填充在链接和图像之间创建间距
你能举个例子吗？就像......我不知道该怎么做e.e
见@Rachel Gallen 的回答。

标签： html css drop-down-menu menu alignment

【解决方案1】：

检查链接和图像之间的间距：https://jsfiddle.net/ghysnxj7/1/，只需添加一个具有margin: 0 56px; 属性的类img就足够了。

关于下拉菜单，这可以通过 Javascript 实现，但由于您是 HTML/CSS 新手，我强烈建议您先了解这两个方面的基础。

https://www.codecademy.com/es有很多教程！

【讨论】：