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

Question

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

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:

词典： Loja: 商店 --- 目录: 目录 --- Revenda!: 转售！ --- Contato: 联系方式 --- Sobre nós: 关于我们 --- Bolinha.png: 那个小红圈

Answer 1

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

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

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

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

Menu with images and... thing

html

css

menu

alignment

drop-down-menu