如何在span元素中添加三个点

Question

.step_one {
  background-color: #31cae3;
  color: #fbf8f8;
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  border-radius: 50%;
  padding: 10px 15px;
}
.step_two {
  background-color: #31cae3;
  color: #fbf8f8;
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  border-radius: 50%;
  padding: 10px 15px;
}
.step_three {
  background-color: #31cae3;
  color: #fbf8f8;
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  border-radius: 50%;
  padding: 10px 15px;
}
.three_steps {
  padding-bottom: 25px;
  padding-top: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="signup_start col-md-offset-1 col-md-10">
  <div class="signup_heading">
    <h1 class="signin_txt">SIGNUP WITH US IN JUST 3 STEPS !</h1>
  </div>
  <div class="col-md-12 col-sm-12 col-xs-12 text-center padd_lr three_steps">
    <div class="col-md-4 col-sm-4 col-xs-4 padd_lr">
      <span class="step_one">1</span>
      <span class="dotted">         </span>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-4 padd_lr">
      <span class="step_two">2</span>
      <span class="dotted">        </span>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-4 padd_lr">
      <span class="step_three">3</span>
    </div>
  </div>
</div>

如何在step1和step2，step2和step3之间添加三个点？

Answer 1

我在HTML中的步骤<br/>的末尾添加了一些<span>和一个新的CSS对象

.dotted {
  border-top: 5px dotted black;
}

Answer 2

你实际上可以用背景解决它

.three_steps{
    background: url("/img/table-tr.png") repeat-x 0 7px
}

要在文本和点之间留出一些空格，请添加填充。让我们说

.step_one{
  padding-right: 10px;
}
.step_two{
  padding-left: 10px;
  padding-right: 10px;
}
.step_three{
  padding-left: 10px;
}

那就是它。简单，也适用于响应式布局

Answer 3

很抱歉，但我无法发表评论。你想要这样的东西吗？

.right {
  height: 20px;
  border-right: 1px dotted black;
}

http://codepen.io/powro01/pen/NRmVxw

Answer 4

你走了:)）

.left{
            float: left;
        }
        .dotted{
            display: inline-block;
            height: 5px;
            border-top: 2px dotted #31cae3;
            width: 16px;
            margin:0px 10px;
        }
        .step_one
        {
            background-color:#31cae3;
            color:#fbf8f8;
            font-family: 'Rubik';
            font-style: normal;
            font-weight: 400;
            font-size:16px;
            text-align:center;
            border-radius:50%;
            padding:10px 15px;
        }
        .step_two
        {
            background-color:#31cae3;
            color:#fbf8f8;
            font-family: 'Rubik';
            font-style: normal;
            font-weight: 400;
            font-size:16px;
            text-align:center;
            border-radius:50%;
            padding:10px 15px;
        }
        .step_three
        {
            background-color:#31cae3;
            color:#fbf8f8;
            font-family: 'Rubik';
            font-style: normal;
            font-weight: 400;
            font-size:16px;
            text-align:center;
            border-radius:50%;
            padding:10px 15px;
        }
        .three_steps
        {
            padding-bottom: 25px;
            padding-top: 10px;
        }

<div class="signup_start col-md-offset-1 col-md-10">
    <div class="signup_heading">
        <h1 class="signin_txt">SIGNUP WITH US IN JUST 3 STEPS !</h1>
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12 text-center padd_lr three_steps">
        <div class="left col-md-4 col-sm-4 col-xs-4 padd_lr">
            <span class="step_one">1</span>
            <div class="dotted"></div>
        </div>
        <div class="left col-md-4 col-sm-4 col-xs-4 padd_lr">
            <span class="step_two">2</span>
            <div class="dotted"></div>
        </div>
        <div class="left col-md-4 col-sm-4 col-xs-4 padd_lr">
            <span class="step_three">3</span></div>
    </div>