如何在 div 框之间的箭头上方显示文本答案

【问题标题】：How to display text above arrows which are between div boxes如何在 div 框之间的箭头上方显示文本
【发布时间】：2022-11-14 08:22:41
【问题描述】：

问题：

我有 div 框并排排列，箭头指向。我想使用 html css 在箭头上方写内容。我怎样才能做到这一点？

    #border {
      height: 80px;
      width: 10%;
      border: 1px black solid;
      display: inline-block;
    }
    
    #borders {
      height: 80px;
      width: 10%;
      border: 1px black solid;
      display: inline-block;
    }
    
    #borderss {
      height: 80px;
      width: 10%;
      border: 1px black solid;
      display: inline-block;
    }
    
    #bordersss {
      height: 80px;
      width: 10%;
      border: 1px black solid;
      display: inline-block;
    }
    .arrow {
    font-size: 105px;
    color: red;
    width:115%
    }

    <div id="border"></div><span class="arrow">&#8594;</span>
    <div id="borders"></div>
    <span class="arrow">&#8594;</span>
    <div id="borderss"></div>
    <span class="arrow">&#8594;</span>
    <div id="bordersss">
    </div>

代码笔链接：https://codepen.io/acqafqe/pen/yLEJgVv

【问题讨论】：

标签： javascript html css

【解决方案1】：

我添加了 flex-layout 和一些额外的样式：

介绍

View Preview

    #main-content {
      display: flex;
      flex-direction: row;
      align-items: center;
    }


    #border {
      height: 80px;
      width: 10%;
      border: 1px black solid;
      display: inline-block;
    }

    #borders {
      height: 80px;
      width: 10%;
      border: 1px black solid;
      display: inline-block;
    }

    #borderss {
      height: 80px;
      width: 10%;
      border: 1px black solid;
      display: inline-block;
    }

    #bordersss {
      height: 80px;
      width: 10%;
      border: 1px black solid;
      display: inline-block;
    }
    .arrow {
      font-size: 105px;
      color: red;
      width:100px;
      margin-top: -60px;
    }

    .arrow-flex {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 50px;
    }

    <div id="main-content">

        <div id="border"></div>
        <div class="arrow-flex">
          <span>text</span>
          <span class="arrow">&#8594;</span>
        </div>
  
        <div id="borders"></div>
  
        <div class="arrow-flex">
          <span>text</span>
          <span class="arrow">&#8594;</span>
        </div>
  
        <div id="borderss"></div>
  
        <div class="arrow-flex">
          <span>text</span>
          <span class="arrow">&#8594;</span>
        </div>  
    
        <div id="bordersss">
        </div>
    </div>

【讨论】：

【解决方案2】：

你可以使用 flexbox 和他们一起玩：

#border {
  height: 80px;
  width: 10%;
  border: 1px black solid;
  display: inline-block;
}

#borders {
  height: 80px;
  width: 10%;
  border: 1px black solid;
  display: inline-block;
}

#borderss {
  height: 80px;
  width: 10%;
  border: 1px black solid;
  display: inline-block;
}

#bordersss {
  height: 80px;
  width: 10%;
  border: 1px black solid;
  display: inline-block;
}
.arrow {
font-size: 105px;
color: red;
width:115%
}
.arrowTitle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#wrapper{
  display: flex; 
  align-items: center;
}

<div id='wrapper'>
<div class="arrowTitle">
  <span>title1</span>
  <span class="arrow">&#8594;</span>
</div>
<div id="borders"></div>
<div class="arrowTitle">
  <span>title2</span>
  <span class="arrow">&#8594;</span>
</div>
<div id="borderss"></div>
<div class="arrowTitle">
    <span>title3</span>
  <span class="arrow">&#8594;</span>
</div>
<div id="bordersss">
</div>
</div>

如果您不熟悉 flexbox，可以查看here。

【讨论】：

【解决方案3】：

您可以将:before 属性设置为.arrow 选择器。

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

#border {
  height: 80px;
  width: 10%;
  border: 1px black solid;
  display: inline-block;
}

#borders {
  height: 80px;
  width: 10%;
  border: 1px black solid;
  display: inline-block;
}

#borderss {
  height: 80px;
  width: 10%;
  border: 1px black solid;
  display: inline-block;
}

#bordersss {
  height: 80px;
  width: 10%;
  border: 1px black solid;
  display: inline-block;
}

.arrow {
  font-size: 105px;
  color: red;
  width:115%;
  position: relative;
}

.arrow:before {
  content: 'test';
  font-size: 14px;
  position: absolute;
  top: 20%;
}

<div id="border"></div><span class="arrow">&#8594;</span>
<div id="borders"></div>
<span class="arrow">&#8594;</span>
<div id="borderss"></div>
<span class="arrow">&#8594;</span>
<div id="bordersss">
</div>

【讨论】：

我之前已经得到了这个解决方案，但没有使用它，因为我正在尝试使用 js 变量作为内容。在这段代码中，我们有 css 中的内容。我想要在 html 中，以便我可以展示来自 js 的变量

【解决方案4】：

您最好将“箭头”移动到 CSS 中，并将您的文本保留在 HTML 中。

#main-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 50px;
}

.border {
  height: 80px;
  width: 10%;
  border: 1px black solid;
  display: inline-block;
}

#borders {
  height: 80px;
  width: 10%;
  border: 1px black solid;
  display: inline-block;
}

#borderss {
  height: 80px;
  width: 10%;
  border: 1px black solid;
  display: inline-block;
}

.bordersss {
  height: 80px;
  width: 10%;
  border: 1px black solid;
  display: inline-block;
}

.seperator {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 80px;
  padding-top: 20px;
}

.seperator::after {
  content: "92";
  display: inline-block;
  font-size: 105px;
  color: red;
  width: 100px;
  margin-top: -60px;
}

<div id="main-content">

  <div class="border"></div>
  <div class="seperator">
    <span>text</span>
  </div>

  <div class="border"></div>

  <div class="seperator">
    <span>text</span>
  </div>

  <div class="border"></div>

  <div class="seperator">
    <span>text</span>
  </div>

  <div class="border">
  </div>
</div>

【讨论】：