0

私はしばらくの間このためのコードを書き込もうとしていましたが、成功しませんでした。

私が達成したいこと：

大画面

この部分は静的に行うのは難しいことではありませんが、応答性の高い概念は私にナッツを与えます。

小さな画面でどのように見えるべきか：

小さな画面が表示されます

今の様子：

ここに画像の説明を入力してください

ご覧のとおり、ウィンドウのサイズを変更し始めると、すべて正常に開始されますが、ある時点で正しい行が新しい行に移動します。

フィドル：

私はフィドルでこれの例を作りました：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 に答える