Question

我在CSS中创建了一个简单的'箭头'，我试图让它出现在一组tabled 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之下，但它出现在它们之上。

编辑：我做了一个工作小提琴：https://jsfiddle.net/zrkqjcsg/2/

Answer 1

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

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

p标签占据了它的父级的全宽，然后将箭头居中。如果要将箭头置于文本下方，则需要更改箭头p标记以显示：inline-block并设置其宽度。或者在表格中引入父级并设置它的宽度。

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

css制造的箭头出现在错误的地方

1 个答案: