css - a href=(社交媒体)在 ul/li 中不起作用

Question

我正在尝试创建一个联系页面，但我正在努力处理社交媒体的 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-->

(如果代码 super 乱，我很抱歉，刚开始用括号编码。)感谢您的支持!

Answer 1

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

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

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