css 响应式

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>

关于这个问题我不知道该说什么，这只是纯文本。我必须回到星星那里<3

:)

Answer 1

还有其他方法可以更好地处理您正在尝试做的事情。在我的例子中，我同时使用了一个标题元素和一个空的 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%;
}

fiddle :http://jsfiddle.net/6uux0cbn/1/