如何在div框之間的箭頭上方顯示文本

問題：

我有 div 框并排排列，箭頭指向。我想使用 html css 在箭頭上方寫內容。我怎樣才能做到這一點？

我的 HTML 代碼：

<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>

我的 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%
}

Codepen 鏈接： https ://codepen.io/acqafqe/pen/yLEJgVv

uj5u.com熱心網友回復：

您可以使用 flexbox 并與它們一起玩。

<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>

#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;
}

如果你不熟悉 flexbox，你可以在這里查看

uj5u.com熱心網友回復：

我添加了 flex-layout 和一些額外的樣式

介紹

查看預覽

HTML

<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>

CSS

#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;
}

uj5u.com熱心網友回復：

您可以將: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>

標籤：javascripthtmlcss

上一篇：表單的底部影片

下一篇：當我更改瀏覽器螢屏尺寸時，為什么此部分不包含在內？HTML、CSS