Html5 - 在 "content"和相关类之间换行

Question

为了用html和css设计以下显示数字的方式(它是一个与轮播相关的图像计数器)

我遇到了一个问题，它在“内容”中放置了一种换行符，以便 .down_numb (36) 可以像之前的图像一样位于斜线下方。

这是我的代码:

#container{
    width: 150px;
    height: 150px;
    background-color :black;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}


/*Similar parameters between the 2 classes*/
.up_num , .down_num{
    position: absolute;
    font-size: 25px;
    
    width: 10px;
    height: 10px;
    color: white;
}

/*Position of up num*/
.up_num{
    top:20%;
    left: 45%;
}

/*Position of down num*/
.down_num{
    top:40%;
    left: 45%;
}

/*Pseudo class of down_num with content "/" */
.down_num:before{
    content : ' \002F ';
}

<div id="container">
        <div class="up_num">1</div>
        <div class="down_num">36</div>
</div>

谢谢大家

Answer 1

我会将 display: inline-block; 和 position: relative 应用于内部 DIV(即将它们排成一行并使用 top 设置以从该行偏移它们)，将 position: absolute 应用于包含 / 的 before 元素，并大致按照我的代码片段调整设置:

#container {
  width: 150px;
  height: 150px;
  background-color: black;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  box-sizing: border-box;
  padding-top: 34px;
  padding-left: 52px;
}

#container>div {
  display: inline-block;
  position: relative;
}
.up_num,
.down_num {
  font-size: 25px;
  color: white;
}
.up_num {
  top: 20%;
}
.down_num {
  top: 35%;
  left: 0.2em;
}
.down_num:before {
  content: ' \002F ';
  position: absolute;
  top: -30%;
  left: -0.3em;
}

<div id="container">
  <div class="up_num">1</div>
  <div class="down_num">36</div>
</div>