如何在中间线和文本之间留出空间？

Question

所以我想做的是在中间和中间文本之间留出空间.这是我的小提琴:https://jsfiddle.net/abqy4w1f/.所以我希望左右两边是圆圈的10px.有什么建议吗？

.outter-h2 {
  width: 200px;
  text-align: center;
  border-bottom: 1px solid #cccccc;
  line-height: 0.1em;
  margin: 35px auto 35px;
}
.outter-span {
  background: #fff;
  padding: 0 10px;
  border: 1px solid #cccccc;
  border-radius: 50%;
  color: #bec3c7;
}

<h2 class="outter-h2"><span class="outter-span">?</span></h2>

Answer 1

对于这个特定的例子,你可以这样做:

.wrapper{
  display: inline-block;
}
.outter-h2 {
  float: left;
  width: 100px;
  text-align: center;
  border-bottom: 1px solid #cccccc;
  margin-top: 4%;
}
.outter-span {
  float: left;
  background: #fff;
  padding: 0 10px;
  border: 1px solid #cccccc;
  border-radius: 50%;
  color: #bec3c7;
  margin: 0 10px;
}

<div class="wrapper">
<div class="outter-h2"></div>
<span class="outter-span">?</span>
<div class="outter-h2"></div>
</div>