html - 使用 img 空间的段落文本

Question

我试图让整个内容都可以点击，所以我将图像和段落包装在 anchor 标记内。我给 anchor 标签一个 40px 左右的 padding，给 img 标签一个 30 左右的右边距。它们都具有 inline-block 的显示属性。问题是它不像图像(附上)中那样显示。我该如何解决？我还不太擅长 CSS 和 HTML。谢谢。

<div class="col-md-3">
<a href="./"><img src="_assets_/images/icon-meeting.png" alt="meeting minutes and agendas"><p>Meeting Minutes &amp; Agendas</p></a>
</div><!-- /.col-md-3 -->
<div class="col-md-3">
<a href="./"><img src="_assets_/images/icon-bills.png" alt="pay bills online"><p>Pay Bills Online</p></a>
</div><!-- /.col-md-3 -->
<div class="col-md-3">
<a href="./"><img src="_assets_/images/icon-document.png" alt="form &amp; document center"><p>Form &amp; Document Center</p></a>
</div><!-- /.col-md-3 -->
<div class="col-md-3">
<a href="./"><img src="_assets_/images/icon-questions.png" alt="frequently asked questions"><p>Frequently Asked Questions</p></a>
</div><!-- /.col-md-3 -->

我的 CSS 是:

#panel p {font-family: 'Raleway', sans-serif;color: #fff;font-size: 18px;display: inline-block;margin: 0}
#panel img {width: 45px;margin-right: 25px;display: inline-block}
#panel a {background-color: #1b4952;display: block;border-radius: 10px;text-decoration: none}

What I want

What I have

Answer 1

请问您使用的是 bootstrap :)

关于这一点，您可以使用行来实现。我只是简单地编辑您的代码检查并尝试一下，希望它对您有所帮助。

<div class="col-md-3">
   <div class="row">
      <div class="col-md-6">
        <a href="./"><img src="_assets_/images/icon-meeting.png" alt="meeting minutes and agendas">
    <div class="col-md-6">
        <p>Meeting Minutes &amp; Agendas</p></a>
</div>
</div>
</div>
</div><!-- /.col-md-3 -->
<div class="col-md-3">
   <div class="row"> 
   <div class="col-md-6">
<a href="./">
     <img src="_assets_/images/icon-bills.png" alt="pay bills online">
      <div class="col-md-6">
     <p>Pay Bills Online</p></a>
</div> 
     </div>
     </div>
     </div>
     <!-- /.col-md-3 -->
<div class="col-md-3">
   <div class="row"> 
   <div class="col-md-6">
<a href="./">
     <img src="_assets_/images/icon-document.png" alt="form &amp; document center">
     <div class="col-md-6">
     <p>Form &amp; Document Center</p></a>
  </div>
     </div>
     </div>
</div><!-- /.col-md-3 -->
<div class="col-md-3">
 <div class="row"> 
   <div class="col-md-6">
<a href="./"><img src="_assets_/images/icon-questions.png" alt="frequently asked questions">
  <div class="col-md-6"><p>Frequently Asked Questions</p></a>
    </div>
   </div>
   </div>
</div><!-- /.col-md-3 --> 

更多信息查看this页