html - css 制作的箭头出现在错误的位置

Question

我在 CSS 中制作了一个简单的“箭头”，并试图让它显示在一组表格 div 下方。

我试过这个解决方案:CSS element appearing in wrong place但它没有用。

我也试过这个:Style of CSS element fails onces float:right is added to div

我尝试制作一个 jsfiddle，但箭头在正确的位置 :( 所以我不确定我做错了什么。但是你的任何想法都会有很大的帮助。

这是箭头的 CSS:

a.btndown {
  height: 40px;
  width: 30px;
  padding: 0px 0px;
  color: #ffffff;
  background-color: #007bff;
  position: relative;
  clear: both;
  display: inline-block;
}

a.btndown:after {
  position: relative;
  bottom: -60px;
  left: -15px;
  content: " ";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 30px 30px 0px 30px;
  border-color: #007bff transparent transparent transparent;
}

.images {
  position: relative;
  width: 465px;
}

.images p {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px;
  width: 445px;
  color: #FFF;
  margin-left: 0px;
  margin-bottom: 4px;
  background-image: url(../images/black.png);
  color: #FFFFFF;
}

<p>
  <div id="num-02" class="images">img src, etc</div>
</p>
<p>
  <div id="num-01" class="images">img src, etc</div>
</p>
<p align="center">
  <a href="" id="myarrow" class="btndown"></a>
</p>

我希望箭头显示在 div 下方，但它出现在它们上方。

编辑:我做了一个工作 fiddle :https://jsfiddle.net/zrkqjcsg/2/

Answer 1

尝试从此标签中删除 align=center

<p align="center">
  <a href="" id="myarrow" class="btndown"></a>
</p>

p 标签占据其父标签的整个宽度，然后将箭头居中。如果您想将箭头居中放置在文本下方，则需要将箭头 p 标签更改为 display:inline-block 并设置其宽度。或者将父级引入表格并设置其宽度。

 <p align="center" style="display: inline-block; width:150px >
     <a href="" id="myarrow" class="btndown"></a>
 </p>