a href=（社交媒体）在 ul / li 中不起作用答案

【问题标题】：a href= (social media) dosn't work in ul / lia href=（社交媒体）在 ul / li 中不起作用
【发布时间】：2018-11-24 16:22:56
【问题描述】：

我正在尝试创建一个联系页面，但我正在为社交媒体的 href 标签而苦苦挣扎。当我尝试单击它时，它不会去任何地方或做任何事情。有谁知道是什么问题？

html {
  height: 100%;
  box-sizing: border-box;
  background-color: #001725;
  color: white;
  
  h4 {
    font-size: 30px;
    letter-spacing: 5px;
    text-decoration-style: solid;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    text-align: right;
}

p {
    margin-bottom: 1.5rem;
}

li {
    list-style-type: none;
}

/*Links*/
/* unvisited link */
a {
    text-decoration: none;
}

a:link {
    color: slategrey;
}

/* visited link */
a:visited {
    color: powderblue;
}

/* mouse over link */
a:hover {
    color: ghostwhite;
}

/* selected link */
a:active {
    color: hotpink;
}

<!--Begin Article: Text-->
 <article class="text_column">
  <h2>CONTACT<br>&amp;SOCIAL MEDIA</h2>

  <p class="text">
    Sawadee kah&excl;
    <br>
    I&apos;d like to show you some information of my working experiance, projects and passion. I hope you&apos;ll get inspired, so let&apos;s have look around <i class="far fa-smile"></i>.
  </p>
  
  <p id="right">
       <ul>
        <li><h4><a href="https://twitter.com/alice_ticha"></a>Twitter <i class="fab fa-twitter"></i></h4></li>
        <li><h4><a href="https://www.facebook.com/MadPandaCosplayArt/"></a>Facebook <i class="fab fa-facebook-square"></i></h4></li>
        <li><h4><a href="https://www.instagram.com/MadPanda_Cosplay_Art/"></a>Instagram <i class="fab fa-instagram"></i></h4></li>
        <li><h4><a href="https://madpandacosplayart.tumblr.com/"></a>Tumblr <i class="fab fa-tumblr-square"></i></h4></li>
    </ul>
     </p>
     </article>
<!--End Article: Text-->

（如果代码非常混乱，我很抱歉，刚开始用括号编码。）感谢您的支持！

【问题讨论】：

链接文本进入 inside 锚标记。

标签： css html href brackets

【解决方案1】：

您必须在标签 a 内设置文本（或标签 li）才能在元素上设置链接

<a href="https://madpandacosplayart.tumblr.com/">Tumblr</a>

顺便说一下，你的 i 标签也是一样的

【讨论】：

锚元素不能是li元素的父元素。不过，您可以将 li 的内容包装在锚点中。

【解决方案2】：

您的文本需要在锚标记内。由于锚标记内部没有任何内容，因此它不会呈现可点击的表面。

【讨论】：

【解决方案3】：

<li><h4><a href="https://twitter.com/alice_ticha">Twitter</a> <i 
class="fab fa-twitter"></i></h4></li>

关闭 Twitter 后面的 a 标签

【讨论】：

【解决方案4】：

你所做的是

<a href="https://twitter.com/alice_ticha">
</a>
Twitter <i class="fab fa-twitter"></i>

但你应该用href 包裹文本以将其作为链接像这样

<a href="https://twitter.com/alice_ticha">
  Twitter <i class="fab fa-twitter"></i>
</a>

    html {
      height: 100%;
      box-sizing: border-box;
      background-color: #001725;
      color: white;
      
      h4 {
        font-size: 30px;
        letter-spacing: 5px;
        text-decoration-style: solid;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
        text-align: right;
    }

    p {
        margin-bottom: 1.5rem;
    }

    li {
        list-style-type: none;
    }

    /*Links*/
    /* unvisited link */
    a {
        text-decoration: none;
    }

    a:link {
        color: slategrey;
    }

    /* visited link */
    a:visited {
        color: powderblue;
    }

    /* mouse over link */
    a:hover {
        color: ghostwhite;
    }

    /* selected link */
    a:active {
        color: hotpink;
    }

     <article class="text_column">
      <h2>CONTACT<br>&amp;SOCIAL MEDIA</h2>

      <p class="text">
        Sawadee kah&excl;
        <br>
        I&apos;d like to show you some information of my working experiance, projects and passion. I hope you&apos;ll get inspired, so let&apos;s have look around <i class="far fa-smile"></i>.
      </p>
      
      <p id="right">
           <ul>
            <li><h4><a href="https://twitter.com/alice_ticha">Twitter <i class="fab fa-twitter"></i></a></h4></li>
            <li><h4><a href="https://www.facebook.com/MadPandaCosplayArt/">Facebook <i class="fab fa-facebook-square"></i></a></h4></li>
            <li><h4><a href="https://www.instagram.com/MadPanda_Cosplay_Art/">Instagram <i class="fab fa-instagram"></i></a></h4></li>
            <li><h4><a href="https://madpandacosplayart.tumblr.com/">Tumblr <i class="fab fa-tumblr-square"></a></i></h4></li>
        </ul>
         </p>
         </article>

【讨论】：

【解决方案5】：

你的文字不匹配

html {
  height: 100%;
  box-sizing: border-box;
  background-color: #001725;
  color: white;
  
  h4 {
    font-size: 30px;
    letter-spacing: 5px;
    text-decoration-style: solid;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    text-align: right;
}

p {
    margin-bottom: 1.5rem;
}

li {
    list-style-type: none;
}

/*Links*/
/* unvisited link */
a {
    text-decoration: none;
}

a:link {
    color: slategrey;
}

/* visited link */
a:visited {
    color: powderblue;
}

/* mouse over link */
a:hover {
    color: ghostwhite;
}

/* selected link */
a:active {
    color: hotpink;
}

<!--Begin Article: Text-->
 <article class="text_column">
  <h2>CONTACT<br>&amp;SOCIAL MEDIA</h2>

  <p class="text">
    Sawadee kah&excl;
    <br>
    I&apos;d like to show you some information of my working experiance, projects and passion. I hope you&apos;ll get inspired, so let&apos;s have look around <i class="far fa-smile"></i>.
  </p>
  
  <p id="right">
       <ul>
        <li><h4><a href="https://twitter.com/alice_ticha">Twitter <i class="fab fa-twitter"></i></a></h4></li>
        <li><h4><a href="https://www.facebook.com/MadPandaCosplayArt/">Facebook <i class="fab fa-facebook-square"></i></a></h4></li>
        <li><h4><a href="https://www.instagram.com/MadPanda_Cosplay_Art/">Instagram <i class="fab fa-instagram"></i></a></h4></li>
        <li><h4><a href="https://madpandacosplayart.tumblr.com/">Tumblr <i class="fab fa-tumblr-square"></i></a></h4></li>
    </ul>
     </p>
     </article>
<!--End Article: Text-->

【讨论】：