8

見出しのテキストの両側に同じ長さの線があり、線とテキストの間に固定サイズのパディングがある見出しを作成する必要があります。テキストは変化するため、幅を設定しないでください。線は、見出しコンテナで利用可能な残りのすべての幅を占める必要があります。見出しのテキストは背景を設定してはなりません。背後の背景が異なるためです。このようなもの：

-------------------------------------------------- -------一部のテキスト----------------------------------------- --------------------------------

私はテーブルを使用してそれを解決しました：

<table width="100%">
  <td><hr /></td>
  <td style="width:1px; padding: 0 10px; white-space: nowrap;">Some text</td>
  <td><hr /></td>
</table>​

ここで試すことができます：http：//jsfiddle.net/md2dF/3/

意味的には、これは本当に悪い解決策であり、見出しは表形式のデータとは何の関係もありません。テーブルなしでこれをどのように行いますか？

要約すると（提案されたソリューションはすべて1つ以上の要件を見落としているため）：

  • 見出しの幅は固定してはいけません
  • 見出しのテキストに背景を含めることはできません
  • 見出しのテキストの幅は固定してはいけません
  • テキストの両側の行は、残りのすべての幅を占める必要があります
  • 行とテキストの間のパディングは、固定幅である必要があります
  • 疑わしい場合は、http：//jsfiddle.net/md2dF/3/を参照してください。
4

4 に答える 4

22
于 2012-09-21T13:50:26.373 に答える
6

編集：

背景色や画像なし：

<div>
    <div><hr></div>
    <span>Some text</span>
    <div><hr></div>
</div>​

CSS：

div {
    width:300px;
    text-align:center;
    display:table;
}
div > div {
    display:table-cell;
    vertical-align:middle;
}
div > span {
    white-space:nowrap;
}​

IE8+で動作します

ライブデモ

元の答え：

画像なし：

<div>
<span>Some text</span>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS：

​div {
    border-bottom:1px solid #000;
    line-height:16px;
    text-align:center;
}
span {
    background:#FFF;
    position:relative;
    bottom:-8px; /* half of line-height */
    padding:0 15px;
}

ライブデモ

の代わりに、任意のブロック要素（、、h1）を使用できます。h2whateverdiv

于 2012-09-20T23:52:48.477 に答える
6

幅と背景色を知らずにこれを解決する方法は次のとおりです。

構造

<div class="strike">
   <span>Kringle</span>
</div>

CSS

.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 
}

.strike > span {
    position: relative;
    display: inline-block;
}

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: red;
}

.strike > span:before {
    right: 100%;
}

.strike > span:after {
    left: 100%;
}

例: http://jsfiddle.net/z8Hnz/

于 2014-03-24T07:34:12.133 に答える
0

あなたはそのようにそれをすることができます（背景のために、あなたはあなたの色の選択の1pxの画像を作ることができます）：

<h1><span>Some Text</span></h1>

h1 { width: 100%; text-align: center; background: url(pixel.jpg) repeat-x left center; }
h1 span { padding: 0 3px; background-color: #ffffff; }

編集：bgカラーなし：

.hr { width: 100%; height: 40px; line-height: 40px; }
.hr span { width: 10%; text-align: center; float: left; margin: 0; display: inline-block; }
.hr .line { width: 45%; height: 100%; background: url(pixel.jpg) repeat-x left center; float: left; }
.hr .line.right { float: right;}

<div class="hr">
<div class="line left"></div>
<span>Some Text</span>
<div class="line right"></div>
</div>

パーセントなどを調整する必要がありますが、一般的には機能します。

于 2012-09-20T23:50:13.640 に答える