如何在p元素下定位href元素？

Question

所以我想添加一些网络链接，但我希望它们位于我的p元素下面。截至目前，我目前的href元素与我的p元素一致。所以这是我目前的代码：

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-9">
       <p>Here are a few links which may provide some insight to Lisa: 
         <a href="http://www.example.com" target="blank">Hold My Hand</a>
         <a href="http://www.example.com" target="blank">Lean on Me</a>
      </p>
    </div> 
  </div>
</div>

Answer 1

您的锚标记包含在p标记内。 将其放在p标记之外或在文本中添加范围并使其100％宽（使用bootstrap类）。

使用p标记

包裹您的span标记文字

由于您使用的是bootstrap，因此可以使用课程col-xs-12

<span class='col-xs-12'>Here are a few links which may provide some insight to Lisa: </span>

Answer 2

如果您想将链接放在您编写的文本下，您有很多方法可以做到这一点...... 您可以使用此标记'<div>', '<br>', '<ul>'，如下所示

解决方案一（使用div标签）：

  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-9">
        <p>Here are a few links which may provide some insight to Lisa: 
        <div><a href="https://www.youtube.com/watch?v=xoW3bqnr7tw"target="blank">Hold My Hand</a></div>
        <div><a href="https://www.youtube.com/watch?v=8A_j7aDTUCs"   target="blank">Lean on Me</a></div></p>
     </div> 
    </div>
  </div>

解决方案二（使用ul和li标签）：

    <div class="container-fluid">
  <div class="row">
    <div class="col-xs-9">
        <p>Here are a few links which may provide some insight to Lisa: 
            <ul>
                <li>
                    <a href="https://www.youtube.com/watch?v=xoW3bqnr7tw"target="blank">Hold My Hand</a>
                </li>
                <li>
                    <a href="https://www.youtube.com/watch?v=8A_j7aDTUCs"   target="blank">Lean on Me</a>
                </li>
            <ul>
        </p>
        </ul>
    </div> 
  </div>
</div>

解决方案三（使用br标签）：

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-9">
        <p>Here are a few links which may provide some insight to Lisa: 
            </br>
            <a href="https://www.youtube.com/watch?v=xoW3bqnr7tw"target="blank">Hold My Hand</a>
            </br>
            <a href="https://www.youtube.com/watch?v=8A_j7aDTUCs"   target="blank">Lean on Me</a>       
        </p>
        </ul>
    </div> 
  </div>
</div>

Answer 3

移动结束标记</p>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-9">
       <p>Here are a few links which may provide some insight to Lisa: </p>
         <a href="https://www.youtube.com/watch?v=xoW3bqnr7tw"target="blank">Hold My Hand</a>
     <a href="https://www.youtube.com/watch?v=8A_j7aDTUCs"   target="blank">Lean on Me</a>
        </div> 
       </div>
      </div>