带有链接

时间：2018-04-06 05:32:55

标签： html css hyperlink icons

我有一个由社交媒体制作的图标列表，但他们只能点击图标的字母，我希望它可以在任何地方点击，但我必须点击＆＃34; F＆＃34 ; facebook： enter image description here

在Facebook图标上，我必须在＆＃34; F＆＃34;上单击，如果我点击蓝点它不起作用，我该如何解决这个问题？这是我的代码：

<div class="leftside">
    <ul class="socialmediaicons">
      <li><a href="https://www.facebook.com/EnUnChasquido/"><i class="fa fa-facebook"></i></li></a>
      <li><i class="fa fa-instagram"></i></li>
      <li><i class="fa fa-twitter"></i></li>
      <li><i class="fa fa-youtube"></i></li>
    </ul>
  </div>

3 个答案:

答案 0 :(得分：2)

可能的解决方法是使用css。 锚是内联元素，它只包装图标。我们需要锚点来覆盖整个区域 li

使用css 

ul li a{
    display:inline-block;
    width:100%;
    height:100%;
}

答案 1 :(得分：2)

＆＃13;
＆＃13; 
li{
	border:1px solid red;
	display: inline-block;
}
.fa{
	padding:15px;
	padding-bottom: 15px;
	padding-top:15px;

}
a{
	display: block;
}
＆＃13; 
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
	<div class="leftside">
    <ul class="socialmediaicons">
      <li><a href="https://www.facebook.com/EnUnChasquido/"><i class="fa fa-facebook"></i></a></li>
      <li><i class="fa fa-instagram"></i></li>
      <li><i class="fa fa-twitter"></i></li>
      <li><i class="fa fa-youtube"></i></li>
    </ul>
  </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13; 

   <html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
li{
    border:1px solid red;
    display: inline-block;
}
.fa{
    padding:15px;
    padding-bottom: 15px;
    padding-top:15px;

}
a{
    display: block;
}
</style>
</head>
<body>
    <div class="leftside">
    <ul class="socialmediaicons">
      <li><a href="https://www.facebook.com/EnUnChasquido/"><i class="fa fa-facebook"></i></li></a>
      <li><i class="fa fa-instagram"></i></li>
      <li><i class="fa fa-twitter"></i></li>
      <li><i class="fa fa-youtube"></i></li>
    </ul>
  </div>
</body>
</html>

答案 2 :(得分：0)

我会使用inherit来表示li项的de with和height。我使用flexbox来对齐中心的所有内容。为其他图标创建超链接时，您可以删除li。

的Flexbox设置 

li {
  width: 50px;
  height: 50px;
  background-color: pink;
  border: thin solid black;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

li>a {
  width: inherit;
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="leftside">
  <ul class="socialmediaicons">
    <li><a href="https://www.facebook.com/EnUnChasquido/"><i class="fa fa-facebook"></i></a></li>
    <li><i class="fa fa-instagram"></i></li>
    <li><i class="fa fa-twitter"></i></li>
    <li><i class="fa fa-youtube"></i></li>
  </ul>
</div>

相关问题
最新问题