Question

我有一个包含6个无序列表元素的栏。其中2个是Ahref文本，工作正常，其中4个是与Ahref的社交图标。问题是我似乎无法使图标真的是Ahrefs，因为它们由于某种原因不可点击。

我也在这里发布了代码。

HTML：/ 带元素的菜单栏 /

 <div class=news-bar><ul>
<li><a href='http://feeds.feedburner.com/stoiximatakias24gr' target='_blank' title='Subscribe'><div class='rss' style='img border='0''/></a></li>
<li><a href='http://facebook.com/stoiximatakias24' target='_blank' title='Like'><div class='facebook' style='img border='0''/></a></li>
<li><a href="http://twitter.com/#!/stiximatakias24" target='_blank' title='Follow'><div class='twitter' style="img border='0' "/></a></li>
<li><a href='https://plus.google.com/u/0/b/107197240595841591617/' target='_blank' title='Google Plus'><div class='googleplus' style='img border='0' '/></a></li>
<li><a href='http://stoiximatakias24.gr/p/contact-us.html' title='Επικοινωνήστε μαζί μας'>Επικοινωνία</a></li> 
<li><a href='http://stoiximatakias24.gr/p/terms-and-conditions.html'>Όροι χρήσης</a></li>
</ul></div>

CSS：/ 菜单样式和社交图标 /

.news-bar {
    background-color: black;
    padding: 4px 0px 2px 2px;
    -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
    font-size: 14px;
    border-bottom: 2px #444444 solid;
    border-radius:0 0 10px 10px;
}
.news-bar ul{margin-right:10px;padding-left:10px;color:#666;list-style-type:none;font:normal 16px Open Sans, Helvetica,Verdana,sans-serif;margin:0}
.news-bar li{display:inline-block;margin:0;float:right;padding:3px 3px 3px 2px;}
.news-bar li a{float:left;display:block;text-decoration:none;font-weight:400;color:#aeaeae;padding:2px 1px 0px 6px;}
.news-barli a:visited{color:#aeaeae}
.news-bar li a:hover{color:#fff;text-decoration:underline}
.rss {width:20px; height:20px; background:url(https://3.bp.blogspot.com/-6hWkhFIyouQ/U-JK3PRVBcI/AAAAAAAAc-8/5gWAfpyx2eM/s1600/Social-Full.png) 0 0px;margin-right:6px;margin-top:2px;}
.facebook {width:20px; height:20px; background:url(https://3.bp.blogspot.com/-6hWkhFIyouQ/U-JK3PRVBcI/AAAAAAAAc-8/5gWAfpyx2eM/s1600/Social-Full.png) 0 -20px;margin-right:3px;margin-top:2px;}
.twitter {width:20px; height:20px; background:url(https://3.bp.blogspot.com/-6hWkhFIyouQ/U-JK3PRVBcI/AAAAAAAAc-8/5gWAfpyx2eM/s1600/Social-Full.png) 0 -40px;margin-right:3px;margin-top:2px;}
.googleplus {width:20px; height:20px; background:url(https://3.bp.blogspot.com/-6hWkhFIyouQ/U-JK3PRVBcI/AAAAAAAAc-8/5gWAfpyx2eM/s1600/Social-Full.png) 0 -60px;margin-right:3px;margin-top:2px;}

随时询问任何信息。

Answer 1

您的 div 周围的语法错误，请尝试以下操作：

.news-bar {
  background-color: black;
  padding: 4px 0px 2px 2px;
  -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
  font-size: 14px;
  border-bottom: 2px #444444 solid;
  border-radius: 0 0 10px 10px;
}

.news-bar ul {
  margin-right: 10px;
  padding-left: 10px;
  color: #666;
  list-style-type: none;
  font: normal 16px Open Sans, Helvetica, Verdana, sans-serif;
  margin: 0
}

.news-bar li {
  display: inline-block;
  margin: 0;
  float: right;
  padding: 3px 3px 3px 2px;
}

.news-bar li a {
  float: left;
  display: block;
  text-decoration: none;
  font-weight: 400;
  color: #aeaeae;
  padding: 2px 1px 0px 6px;
}

.news-barli a:visited {
  color: #aeaeae
}

.news-bar li a:hover {
  color: #fff;
  text-decoration: underline
}

.rss {
  width: 20px;
  height: 20px;
  background: url(https://3.bp.blogspot.com/-6hWkhFIyouQ/U-JK3PRVBcI/AAAAAAAAc-8/5gWAfpyx2eM/s1600/Social-Full.png) 0 0px;
  margin-right: 6px;
  margin-top: 2px;
}

.facebook {
  width: 20px;
  height: 20px;
  background: url(https://3.bp.blogspot.com/-6hWkhFIyouQ/U-JK3PRVBcI/AAAAAAAAc-8/5gWAfpyx2eM/s1600/Social-Full.png) 0 -20px;
  margin-right: 3px;
  margin-top: 2px;
}

.twitter {
  width: 20px;
  height: 20px;
  background: url(https://3.bp.blogspot.com/-6hWkhFIyouQ/U-JK3PRVBcI/AAAAAAAAc-8/5gWAfpyx2eM/s1600/Social-Full.png) 0 -40px;
  margin-right: 3px;
  margin-top: 2px;
}

.googleplus {
  width: 20px;
  height: 20px;
  background: url(https://3.bp.blogspot.com/-6hWkhFIyouQ/U-JK3PRVBcI/AAAAAAAAc-8/5gWAfpyx2eM/s1600/Social-Full.png) 0 -60px;
  margin-right: 3px;
  margin-top: 2px;
}

<div class=news-bar>
  <ul>
    <li>
      <a href='http://feeds.feedburner.com/stoiximatakias24gr' target='_blank' title='Subscribe'>
        <div class='rss' border='0'></div>
      </a>
    </li>
    <li>
      <a href='http://facebook.com/stoiximatakias24' target='_blank' title='Like'>
        <div class='facebook' border='0'></div>
      </a>
    </li>
    <li>
      <a href="http://twitter.com/#!/stiximatakias24" target='_blank' title='Follow'>
        <div class='twitter' border='0'></div>
      </a>
    </li>
    <li>
      <a href='https://plus.google.com/u/0/b/107197240595841591617/' target='_blank' title='Google Plus'>
        <div class='googleplus' border='0'></div>
      </a>
    </li>
    <li><a href='http://stoiximatakias24.gr/p/contact-us.html' title='Επικοινωνήστε μαζί μας'>Επικοινωνία</a></li>
    <li><a href='http://stoiximatakias24.gr/p/terms-and-conditions.html'>Όροι χρήσης</a></li>
  </ul>
</div>

Answer 2

<li>
  <a href="http://feeds.feedburner.com/stoiximatakias24gr" target="_blank" title='Subscribe'>
    <img class="rss" style="img border='0'">
  </a>
</li>

这是我工作的一个例子，为其他人做同样的事情：）

主要问题： - <div />元素不存在，您需要<img />元素

其他说明：

您可能希望避免使用''的html属性，他们通常会使用“” 示例style='img border='0''很难阅读，不会传递一些短语，但style="img border='0'"会
正确缩进代码，因为它有助于提高可读性

Answer 3

您错过了结束</div>标记。您不能将/>与div一起使用。（我想你可以，但它会导致像你这样的问题）。只需添加结束标记，链接即可。

Unordered Ahref List上的图标无法点击

3 个答案: