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

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

转载作者：太空宇宙更新时间：2023-11-03 21:55:22

一段时间以来，我一直在尝试为此编写代码，但没有成功。

我要实现的目标:

large screens

静态这部分并不难，但响应式概念让我抓狂。

在小屏幕上应该如何显示:

Small screens display

现在的样子:

enter image description here

如您所见，当我开始调整窗口大小时，一开始一切都很好，但随后，在某一点上，正确的行转到了新行。

fiddle :

我在 Fiddle 上做了一个例子:http://jsfiddle.net/Gbcfs/8/

代码:

<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>

最佳答案

我会用边框做这个。

试试这个:

  <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

关于html - 响应式 HTML + CSS 自定义分界线 - IMAGE，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14174231/