响应文本与内联上面的项目符号

Question

我正在尝试制作带有项目符号和文字的部分，如下图所示，当我尝试将文字重叠在另一个上时。

下面的内容是虚拟一些内容小一些内容大。我只用CSS和HTML寻找代码（NO BOOTSTRAP） 我写的代码是
HTML代码

<div>
<span class="dot">Hello Hello Hello</span>
<span class="dot">Hello Hello Hello</span>
<span class="dot">Hello Hello Hello</span>
<span class="dot">Hello Hello Hello</span>
<span class="dot">Hello Hello Hello</span>
<span class="dot">Hello Hello Hello</span>
</div>

我的CSS代码：

.dot {
height: 25px;
width: 25px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
div { text-align:center; }

Answer 1

您可以使用某些positioning和伪元素::before来实现此效果。以下是一些提示：

• 为文本部分提供固定的width，以便将更长的文字包裹起来
• 将伪元素置于绝对位置，使其为负top距离，left距离为50％减去自身宽度的一半
• 根据需要调整容器的margin / padding

.dot {
  width: 80px;
  position: relative;
  display: inline-block;
  color: white;
  margin: 0 5px;
}

.dot::before {
  content: '';
  position: absolute;
  top: -30px;
  left: calc(50% - 6px);
  height: 12px;
  width: 12px;
  background: white;
  border-radius: 50%;
  display: block;
}

div {
  padding-top: 1.5em;
  margin-top: 1.5em;
  text-align: center;
  border-top: 1px solid white;
}

body {
  background: #2157d5;
}

<div>
  <span class="dot">Hello Hello Hello</span>
  <span class="dot">Hello Hello Hello</span>
  <span class="dot">Hello Hello Hello</span>
  <span class="dot">Hello Hello Hello</span>
  <span class="dot">Hello Hello Hello</span>
  <span class="dot">Hello Hello Hello</span>
</div>

Answer 2

尝试以下代码段

＆＃13;

＆＃13;

body {
  padding: 25px;
  font-family: sans-serif;
  background: blue;
}

.timeline {
  white-space: nowrap;
  overflow-x: auto;
  padding: 30px 0 10px 0;
  position: relative;
  
}

.dot {
  display: inline-block;
  vertical-align: top;
  color: #fff;
  padding: 10px;
  font-size: 12px;
  text-align: center;
  position: relative;
  border-radius: 3px;
  min-width: 200px;
  max-width: 500px;
}

.dot img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.dot:after {
  content: '';
  display: block;
  background: #fff;
  width: 7px;
  height: 7px;
  border-radius: 6px;
  border: 3px solid;
  position: absolute;
  left: 50%;
  top: -25px;
  margin-left: -6px;
}

.dot:before {
  content: '';
  display: block;
  width: 5px;
  height: 20px;
  position: absolute;
  left: 50%;
  top: -20px;
  margin-left: -2px;
}

.bar {
  height: 2px;
  background: #eee;
  width: 100%;
  position: relative;
  top: 13px;
  left: 0;
}

＆＃13;

<div class="bar"></div>
<div class="timeline">
  <div class="dot">
    Hello Hello Hello
  </div>
  <div class="dot">
    Hello Hello Hello
  </div>
  <div class="dot">
    Hello Hello Hello
  </div>
  <div class="dot">
    Hello Hello Hello
  </div>
  <div class="dot">
    Hello Hello Hello
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;