HTML 单词衬里

Question

这是我的台词

<p style="text-align:center;">
  <a href="www.facebook.com" style="text-decoration:none;color:black">
   <h2>ABOUT US</h2></a>
  <a href="www.facebook.com" style="text-decoration:none;color:black">
    <h2>CONTACT US</h2></a>
  <b> | </b>
  <a href="www.facebook.com" style="text-decoration:none;color:black">
    <h2>F . A . Q</h2></a>
    <b> | </b>
  <a href="www.facebook.com" style="text-decoration:none;color:black">
    <h2>SHIPPING</h2></a>
    <b> | </b>
  <a href="www.facebook.com" style="text-decoration:none;color:black">
    <h2>RETURN POLICY</h2></a>
</p>

结果如下：

关于我们

联系我们

|

F.一个。问

|

运输

|

退货政策

我希望结果是这样的：

About Us | Contact Us | F.A.Q | Shipping | Return Policy

我做错了什么？

Answer 1

试试这个：

.html：

<ul class="hr">
   <li><a href="www.facebook.com" style="text-decoration:none;color:black">ABOUT US</a></li>
   <li><a href="www.facebook.com" style="text-decoration:none;color:black">CONTACT US</a></li>
   <li><a href="www.facebook.com" style="text-decoration:none;color:black">F . A . Q</a></li>
   <li><a href="www.facebook.com" style="text-decoration:none;color:black">SHIPPING</a></li>
   <li><a href="www.facebook.com" style="text-decoration:none;color:black">RETURN POLICY</a></li>
</ul>

.css：

ul.hr {
    margin: 0; 
    padding: 4px; 
}
ul.hr li {
    display: inline; /*displaing your menu in-line*/
    margin-right: 5px; 
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    padding: 3px;
}

Answer 2

你不能将块元素（h2）放在锚点（a）内

如果您从<a>中删除<h2>，那么您的问题将得到解决在此处查看更新的代码

但我认为ul li最适合这种结构。

另外，如果您想在<a>和<b>之间添加一些空间，请使用margin

js小提琴代码

Answer 3

   <ul class="social_navigation">
    <li><a href="www.facebook.com">About us</a></li>
    <li><a href="www.facebook.com">Contact us</a></li>
    <li><a href="www.facebook.com">F . A . Q</a></li>
   <li><a href="www.facebook.com">shipping</a></li>
   <li><a href="www.facebook.com">return policy</a></li>
 </ul>
  ul.social_navigation{
     margin:0;
    padding:0;
  }
 ul.social_navigation li{
   float:left;
   list-style:none;
   padding:10px;
 }
 ul.social_navigation li a{
    color:blue;
    text-decoration:none;
    border-left:1px solid #000;
    padding-left:14px;
    font-size:14px;
  }
   ul.social_navigation li:first-child a{
    border-left:none;
    }
   ul.social_navigation li:nth-child(3) a{
     color:#000;
    }