我正在努力使整个事情可以点击,所以我将图像和段落包装在一个锚标记中。我为锚标签提供了40px左右的填充,并为img标签提供了大约30的右边距。它们都具有内联块的显示属性。问题是它没有显示像图像上的那个(附加)。我该如何解决?我还不擅长CSS和HTML。感谢。
<div class="col-md-3">
<a href="./"><img src="_assets_/images/icon-meeting.png" alt="meeting minutes and agendas"><p>Meeting Minutes & 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 & document center"><p>Form & 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}
答案 0 :(得分: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 & 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 & document center">
<div class="col-md-6">
<p>Form & 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页面