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）

中

如果您从<h2>删除<a>，那么您的问题就会解决 检查 updated code here

但我ul li这个结构最合适。

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

<强> jsFiddle Code

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;
    }