0

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

我想要完成的事情：

大屏幕

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

在小屏幕上应该如何看：

小屏幕显示

现在的样子：

在此处输入图像描述

如您所见，当我开始调整窗口大小时，一切开始都很好，但是随后，右行转到新行。

小提琴：

我在 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>
4

3 回答 3

4

我会用边框来做这个。

试试这个：

  <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

于 2013-01-05T17:59:56.623 回答
0

我认为您的问题也依赖于字体大小，请尝试使用以下 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>

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

于 2013-01-05T18:08:52.030 回答
0

你可以使用这个代码............我认为这很有帮助..

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

于 2013-07-24T13:57:08.747 回答