как автоматически управлять высотой изображения <img>внутри ссылки <a>в css - PullRequest
Новая
       48

как автоматически управлять высотой изображения <img>внутри ссылки <a>в css

0 голосов
/ 26 мая 2020

У меня есть код html css в

https://jsfiddle.net/zakutrp4/

стиль вывода выше <div style='height:1em'></div> строка - это то, что я хочу

по какой-то причине мне нужно добавить ссылку <a></a> за пределами <img>, но стиль вывода ниже <div style='height:1em'></div> - это не то, что я хочу. Я хочу, чтобы стиль вывода был таким, как указано выше <div style='height:1em'></div>. Я хочу знать, как изменить исходный код? Может быть, добавить стиль в <a>. Может кто-нибудь придумать, как решить проблему?

исходный код: 

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

1 Ответ

0 голосов
/ 27 мая 2020 
<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>
...