Question

问题在于，它在桌面上运行良好，但在移动设备上运行失败....

 [http://jsfiddle.net/9vv914uL/][1]

我想让这个分频器响应......因为它在更高的分辨率下工作得很好，正如你所看到的......

并且奖励是在

标签内生成不同颜色的单词......

这是css样式表：

.divider {
    text-align:center;
    font-family: 'montserrat';
}

.divider hr {
    margin-left:auto;
    margin-right:auto;
    width:40%;

}

.left {
    float:left;
}

.right {
    float:right;
}

这是

<div style="padding-top:10px; padding-bottom:20px;"class="divider">
<hr class="left" style="margin-top:12px;"/>BLUE RED<hr class="right" style="margin-top:12px;"/>
        </div>

我不知道该怎么说这个问题，这只是纯文本。我必须回到星星＆lt; 3

：）

Answer 1

还有其他方法可以处理这种方法，以便更好地满足您的目标。在我的例子中，我使用的是heading元素和一个空div。标题元素中的文本可以根据需要进行扩展，而无需担心可用空间，并且解决方案可以立即响应。

HTML

<h3 class="divider">
    <span>Title</span>
</h3>

<div class="divider">
    <span></span>
</div>

CSS

.divider {
    border-color: #000;
    border-style: solid;
    border-width: 0 0 1px;
    height: 10px;
    line-height: 20px;
    text-align:center;
    overflow: visable;
}

.divider span {
    background-color: #FFF;
    display: inline-block;
    padding: 0 10px;
    min-height: 20px;
    min-width: 10%;
}

小提琴：http://jsfiddle.net/6uux0cbn/1/

Answer 2

我可能会这样做，而不是搞乱浮标：

.divider {
    text-align: center;
}

.divider:after {
    content: "";
    height: 1px;
    background: #000;
    display: block;
    position: relative;
    top: -8px; /* this value depends on the font size */
}

.divider > span {
    background: #fff;
    padding: 0 10px;
    position: relative;
    z-index: 1;
}

<div class="divider"><span>BLUE RED</span></div>

Answer 3

HTML：

<div style="padding-top:10px; padding-bottom:20px;"class="divider">
    <hr class="left" style="margin-top:12px;"/>

      <div class="title">BLUE RED</div>
            </div>

CSS：

.divider {
    text-align:center;
    font-family: 'montserrat';
    position:relative;
    height: 68px;
}

.div hr {

    width:100%;
    position: absolute;
    z-index: 888;
}

.title {
  position: absolute;
  left:50%;
  width:100px;
  margin-left: -50px;
  z-index: 9999;
  top:15px;
  background: white;
}

css <hr class =“divider”/>响应

3 个答案: