<nav style='display:grid; grid-auto-flow:column; justify-content:start; column-gap:1em; background-color:red; color:white; height:2em; align-items:center'>
<strong style='display:grid; grid-auto-flow:column; justify-content:start'><span class='material-icons'>list</span>商品分类</strong>
<a style='display:contents'><img src='https://how2j.cn/tmall/img/site/chaoshi.png' style='height:100%'></a>
<a style='display:contents'><img src='https://how2j.cn/tmall/img/site/guoji.png' style='height:100%'></a>
<a>平板电视</a>
<a>电热水器</a>
</nav>
Solution 1 :
Problem :
I have an html css code in
https://jsfiddle.net/zakutrp4/
the output style above <div style='height:1em'></div>
line is what I want
for some reason I need to add link<a></a>
outside the <img>
but the output style below <div style='height:1em'></div>
is not what I want. I want the output style is like that above <div style='height:1em'></div>
. I want to know how to change the source code? Maybe add some style in <a>
. Can somebody figure out how to solve the problem?
soure code:
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<nav style='display:grid; grid-auto-flow:column; justify-content:start; column-gap:1em; background-color:red; color:white; height:2em; align-items:center'>
<strong style='display:grid; grid-auto-flow:column; justify-content:start'><span class='material-icons'>list</span>商品分类</strong>
<img src='https://how2j.cn/tmall/img/site/chaoshi.png' style='height:100%'>
<img src='https://how2j.cn/tmall/img/site/guoji.png' style='height:100%'>
<a>平板电视</a>
<a>电热水器</a>
</nav>
<div style='height:1em'></div>
<nav style='display:grid; grid-auto-flow:column; justify-content:start; column-gap:1em; background-color:red; color:white; height:2em; align-items:center'>
<strong style='display:grid; grid-auto-flow:column; justify-content:start'><span class='material-icons'>list</span>商品分类</strong>
<a><img src='https://how2j.cn/tmall/img/site/chaoshi.png' style='height:100%'></a>
<a><img src='https://how2j.cn/tmall/img/site/guoji.png' style='height:100%'></a>
<a>平板电视</a>
<a>电热水器</a>
</nav>