[英]How can I have a clickable image and link (anchor) in a list item
As mentioned in the title, i want to get an icon and an a tag inside a li.正如标题中提到的,我想在 li 中获得一个图标和一个标签。
I want a small icon to the left of the text in a navigation bar but also have the entire bar clickable.我想要导航栏中文本左侧的小图标,但也可以单击整个栏。
I tried to google it but without and results.我试图用谷歌搜索它,但没有结果。
My current situation looks like this:我目前的情况是这样的:
HTML HTML
<ul>
<li><img src="../resources/images/test.png" /><a href="#text">Login</a></li>
<li><a href="#test">Test1</a></li>
<li><a href="#test">Test2</a></li>
<li><a href="#test">Test3</a></li>
<li><a href="#test">Test4</a></li>
</ul>
CSS CSS
ul {
list-style-type: none;
height: 40px;
width: auto;
padding: 0;
margin: 0;
}
li a {
margin-right: 50px;
background: #B0AA9A;
float: left;
height: 30px;
width: 150px;
font-size: 25px;
color: #454138;
font-family: helvetica, sans-serif;
text-decoration: none;
}
img {
height: 20px;
width: 20px;
float: left
}
Do something like this, Put the Img inside the A tag and then both will be clickable to whatever href you give.做这样的事情,把 Img 放在 A 标签内,然后两者都可以点击你提供的任何 href。
<ul>
<li>
<a href="https://www.google.com" target="_blank">
Login
<img src="../resources/images/test.png" />
</a>
</li>
<li><a href="#test">Test1</a></li>
<li><a href="#test">Test2</a></li>
<li><a href="#test">Test3</a></li>
<li><a href="#test">Test4</a></li>
</ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.