Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

Answer 2

您可以使用CSS box-shadow属性轻松创建虚假空间（假设阴影颜色和背景颜色相同）

您只需将此行添加到.outer-span：

box-shadow：0 0 5px 20px #FFF;

此解决方案可保持HTML完整。

<强>演示：

＆＃13;

body {
  background: #FFF;
}

.outter-h2 {
  width: 200px;
  text-align: center;
  border-bottom: 1px solid #cccccc;
  line-height: 0.1em;
  margin: 35px auto 35px;
  position: relative;
  z-index:1;
}

.outter-span {
  background: #fff;
  padding: 0 10px;
  border: 1px solid #cccccc;
  border-radius: 50%;
  color: #bec3c7;
  position: relative;
  z-index:3;
  box-shadow:0 0 5px 20px #FFF; /*add space using box-shadow*/
}

＆＃13;

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

＆＃13;

Answer 3

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

Click here for DEMO

Answer 4

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

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

尝试这个我认为这是你想要的解决方案。如果我不对，请告诉我

Answer 5

这完全按照你的意愿完成（纠正）。

.outer-h2 {
        width: 100px;
    text-align: center;
    border-bottom: 1px solid #cccccc;
    line-height: 0.1em;
    margin: 20px auto 35px;
    float:left;
}
 .outer-span {
     background: #fff;
    padding: 0px 10px;
    color: #bec3c7;
    margin: 10px;
    float:left;
}

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

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

5 个答案: