Solution 1 :

<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>

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>

By

Leave a Reply

Your email address will not be published. Required fields are marked *