スパンが兄弟スパンの垂直位置に影響する理由

次のHTMLページでは、2つのスパン（span1とspan2）を含むdivがあり、その次にはサブスパン、span2aが含まれています。 span1には、span2aのようにテキストが含まれています。この設定では、テキストの垂直方向の配置が異なり、なぜ私は解決できません。スパンが兄弟スパンの垂直位置に影響する理由

問題を複雑にするには、span2とspan2aにスタイル属性があります。実行時にjQueryサイクル・プラグインによって注入されるので、私はこれらを制御できません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Test</title> 
    <style type="text/css"> 
     body {margin: 0; padding: 0; font-family: arial; color: black;} 
     .container { height: 30px; text-align: left; padding: 8px 15px 0 15px; background-color: #fee; border: 1px solid red;} 
     .ticker { font-size: 12px; font-weight: bold; padding-top: 4px; float: left;} 
     .ticker > span:first-child { background-color: #bfb; } 
     .tickerscroll { display: inline-block; background-color: #bbf; } 
    </style> 
</head> 
<body> 
    <div class="container"> 
     <div class="ticker"> 
      <span class="span1">LABEL: </span> 
      <span class="span2 tickerscroll" style="position: relative; width: 480px; height: 15px; overflow-x: hidden; overflow-y: hidden; "> 
       <span class="span2a" style="position: absolute; top: 0px; opacity: 1; z-index: 3; left: 0px; ">The value (in a sub-span; note that Label is lower then this text)</span> 
      </span> 
     </div> 
    </div> 
    <div class="container"> 
     <div class="ticker"> 
      <span class="span1">LABEL: </span> 
      <span class="span2 tickerscroll" style="position: relative; width: 480px; height: 15px; "> 
       &nbsp;<span class="span2a" style="position: absolute; top: 0px; left: 0px; ">The value (this time, I've added a &amp;nbsp; outside this inner span)</span> 
      </span> 
     </div> 
    </div> 
    <div class="container"> 
     <div class="ticker"> 
      <span class="span1">LABEL: </span> 
      <span class="span2 tickerscroll" style="position: relative; width: 480px; height: 15px; "> 
       The value (this time, the inner span span2a is not present at all) 
      </span> 
     </div> 
    </div> 
</body> 
</html>

あなたは私のコードから見ることができるように、私はこの問題を「解決」二つの変種追加しました：

を私の場合、私は非を追加しましたいくつかのテキスト（任意のテキストを追加します - 壊れているスペース）span2aの外側のspan2の内側。
サブスパンを完全に削除し、テキストを2番目のトップレベルスパンのすぐ内側に置きます。しかし、これはjQueryのサイクリング作業をするためにspan2aが必要なため、私にとっては選択肢ではありません。

人工的に& nbspを投げることなく、2つのテキストを同じように整列させる方法はありますか。 span2に？このソリューションは、span要素のいずれかのスタイル属性を変更することはできませんが、必要に応じてCSSクラスを追加できます。

出典

2012-04-02 Richard Fawcett

spanタグが自然なインライン要素であるため、垂直方向の配置が異なる場合は、プロパティを使用してブロックレベルの要素を作成して、span2クラスの動作を変更しています。

.span1 { 
    display: inline-block; 
    *display:inline; /* ie 7 fix */ 
    vertical-align: top; 
}

それとも

.span1 { 
    float:left; 
}

出典

2012-04-02 15:56:17

ありがとう！私はたくさんのことを試みましたが、私はこれを試していなかったことに驚きました。興味深いことに、あなたのソリューションは、少なくともIE7の互換モードで動作しているIE7の修正なしで動作するようです...。 –

これは私の多くの問題の原因となっています。私は最終的に解決策を見つけたことをとてもうれしく思います！ありがとう！ –

：あなたは display:inline-blockとブロックレベル要素としても、あなたの span1クラスを定義し、単に vertical-align:top財産でトップにそれを整合させるか左にそれを浮動ことによってそれを修正することができます

私はこれをしようとするだろう：

は、これらの3スパンのすべてを持っている同じ行の高さと同じ垂直整列を持って

例：

.span1, .span2, .span2a 
{ 
    line-height: 20px; 
    vertical-align: middle; 
}

出典

2012-04-02 16:00:37 Zwik

@Zwikのお越しをお寄せいただきありがとうございます。しかし、これは実際に問題を逆転させ、ラベルは値よりも高くなりました！ vertical-align：topがトリックでしたので、行の高さ指示は無視されていると思いますか？ –

実際、それは考慮に入れられていません。私が投稿したコードは、私が説明したことを示すための例に過ぎません。最終的に、vert align topを使用すると、font-sizeが十分に大きければ、テキストの下に未使用のスペースができます。 – Zwik

.ticker span {vertical-align:top}

あなたの答えへの質問：スパン2は空である、したがって、スパン2スパン1 と整合するものは何も絶対位置スパン2aの含むブロックではありませんが、この2Aれます上から始まる：0;左：スパン2の0、したがってミスアライメント。

2番目のケース：スパン2が空でない場合、スパン1とベースラインで整列され、a.p.スパン2aは期待どおりに整列します。

ケース3はケース2とまったく同じです。

出典

2012-04-02 18:25:35 ichao

+1の解決策です。しかし、私は最初に正しい解決法を提供した@Andres Ilichに受け入れられた答えを与えています。しかし、ありがとう！ –

また、ベースラインの整列についても説明しました。ありがとうございました。 –

スパンが兄弟スパンの垂直位置に影響する理由

答えて

関連する問題