0

基本的に、幅（左と右）を埋める垂直方向に中央に配置された水平線を持つタイトルを作成する必要がありますが、同じ行に複数のテキスト要素をサポートします。たとえば、次のようなものを形成します。

-----アルファ-ベータ-ガンマ-----

これは私がこれまでに持っているものです：

JSfiddle

ここでは、デモは正常に機能していますが、機能するには背景が必要です。サイトの背景は静的な単色ではないため、これは適切な解決策ではありません（スクロールしても動かない固定画像です）。

JSfiddle

したがって、私がする必要があるのは、基本的に、バックグラウンドを使用せずに、最初のバージョンを2番目のバージョンと同じように機能するように修正することです。

私は次のようなことを考えました：

<div class="content">
  <div class="line"></div>
  <div class="line-text">Some</div>
  <div class="line-gap"></div>
  <div class="line-text">Text</div>
  <div class="line-gap"></div>
  <div class="line-text">In a Line</div>
  <div class="line"></div>
</div>

ここで、 .lineは自動幅（左側と右側を埋めるため）であり、.line-gapはテキスト間の線を表示するために10pxと言うだけです。

編集/更新

これは別のデモですが、応答性の高い流体設計のために絶対に位置を設定しようとするよりも、より自動化されたものを好みます...

JSfiddle

4

1 に答える 1

0

背景を使用したくない場合は、:beforeand:afterプロパティを使用して少しトリックを行うことができます。

これがjsFiddleの例です。コンテンツ/プロパティを好きなように変更でき、要求したとおりに実行されます。

以下の例。

HTML：

<ul>
<li class="sub-menu-item" ><a href="#">Example</a></li>
<li class="sub-menu-item" ><a href="#">Example</a></li>
</ul>

CSS：

li.sub-menu-item:before,  li.sub-menu-item:after {
    content: "\2014 \2014"
}

li { 
    display:inline-block;
}
于 2013-03-27T09:59:59.990 に答える