我想开发一个包含图标(材料图标)的浮动条。不幸的是,我的<a href=>
属性不起作用,并且图标不可单击。
任何想法如何解决这个问题?
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul id="navigation">
<li class="material-icons md-48 md-dark">video_library
<a href="https://www.google.com"></a>
</li>
<li class="material-icons md-48 md-dark">contact_support
<a href="https://www.google.com" target="_blank"></a>
</li>
<li class="material-icons md-48 md-dark">mail
<a href="https://www.google.com" target="_blank"></a>
</li>
</ul>
文本必须在链接内,并且应用于这些链接的类...而不是li
。
li {
list-style: none;
display: inline;
}
a {
text-decoration: none;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul id="navigation">
<li>
<a href="https://www.google.com" class="material-icons md-48 md-dark">video_library</a>
</li>
<li>
<a href="https://www.google.com" target="_blank" class="material-icons md-48 md-dark">contact_support</a>
</li>
<li>
<a href="https://www.google.com" target="_blank" class="material-icons md-48 md-dark">mail</a>
</li>
</ul>
通过<a>
中的设置图标
<li>video_library
<a href="https://www.google.com"><i class="material-icons md-48 md-dark">video_library</i></a>
</li>