Question

我一直试图为此编写代码一段时间但没有成功。

我想要完成的事情：

large screens

这部分并不难做到静态，但反应灵敏的概念让我疯狂。

如何看小屏幕：

Small screens display

现在的样子：

enter image description here

就像你看到的那样，当我开始调整窗口的大小时，一切都开始好了，但是，在一个点上，右边的线条会转到新的一行。

小提琴：

我在小提琴上做了一个例子：http://jsfiddle.net/Gbcfs/8/

CODE：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.line{width:41%; background-color: #a6a6a6; height:1px; display:inline; margin:17px 2px 2px; float:left; min-width:2px;}
 h2 {float:left;}
 </style>
</head>

<body>
<div class="line"></div>
<h2>How it works</h2>
<div class="line"></div>
</body>
</html>

Answer 1

我会用边框做这件事。

试试这个：

  <h2><span>Heading 2</span></h2>


body {
  background-color:#fff;
}
h2 {
  border-bottom:solid 1 px black;
  text-align:center;
}
h2 span {
  background-color:#fff;
  padding-bottom:3px;
  margin-bottom:-3px;
  display:inline-block;
}

http://jsbin.com/aguxoz/1/edit

Answer 2

我认为您的问题也依赖于字体大小，尝试使用以下CSS

<style>
.line{width:30%; background: #a6a6a6  0 50% repeat-x; display:inline; margin:2px 2px 2px; float:left; }
 h2 {float:left;}
.autowidth
 {
    width:auto;
 }
 </style>

以及以下标记

<div class="autowidth">
<div class="line"></div>
<h2>How it works</h2>
<div class="line"></div>
<div>

这在一定程度上有所帮助。

Answer 3

您可以使用此代码...........我认为这非常有用..

<div><div class="line"></div>
<h2 style="padding-top:8px">How it works</h2>
<div class="line"></div></div>

.line{width:41%; background-color: #a6a6a6; height:1px; display:inline; margin:17px 2px 0 2px; float:left; min-width:2px;}
h2 {float:left;}

响应式HTML + CSS自定义分界线 - IMAGE

3 个答案: