Question

我正在开发一个移动网站项目，我需要在其中制作一个列表，就像更多的移动新闻应用程序一样。单击列表项时，您将直接进入指定新闻页面。通过单击列表中嵌入的按钮，将触发其他操作（如共享等）。

我确实有一个纯粹的html + css四处走动可以完成这项任务，但我很难找到更加无缝的解决方案。我的走动演示是这样的： HTML：

<body>
<div class="fluid glcage">
<ul>
       <!-- row 01 -->
       <li>
       <a class="us" href="http://google.com">
       <span class="dimg"><i class="fa fa-medkit fa-4x"></i></span>
       <h3>dummy header</h3>
       <p class="desc">dummy description, dummy description, dummy description, dummy description, dummy description, dummy description... </p>
       <span class="source">www.cancer.org</span></a>
       <a href="http://facebook.com"><i class="fa fa-facebook fa-lg"></i></a>
       <a href="https://twitter.com"><i class="fa fa-twitter fa-lg"></i></a>
       </li>
   </div>
</body>

的CSS：

.glcage ul li{
    display: block;
    width: 100%;
    height: auto;
    min-height: 75px;
    border-bottom: 1px solid #b9b9b9;
    border-top: 1px solid #f7f7f7;
    background: #ebebeb;
}
.glcage ul li a:hover h3 { 
    color: #7287b1;
}
.glcage ul li a:hover p.desc { 
    color: #757575;
}

.glcage ul li a:hover {
background: #efefef;
}
.glcage ul li span.dimg {
  background: #fff;
  max-height: 60px;
  display: inline-block;
  float: left;
  padding: 2px;
  margin-top: 6px;
  margin-left: 5px;
  margin-right: 8px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

和小提琴演示：demo。正如您所看到的那样，点击＆＃34;虚拟描述＆＃34;结尾处的任何地方。并确切地在网址上将用户引导至google.com。但如果点击两个图标右侧的空白区域，则不会发生任何事情。

PS：我真的很难找到更好的方法来描述这个问题，所以如果你有任何想法让这个问题更具人性化，请随时告诉我。

如何在可点击列表项中无缝嵌入图标？

0 个答案: