同じ行の見出しとスパン

-4

私はdivを動的に生成しており、このようなソリューション（ページの読み込み後に動的に生成されると無視されるため、外部スタイルもCSSもありません）が必要です。私はブラウザが私のテキストアライメントを無視する理由を理解していない：右。また、私はhとスパン（pはない）を保ちたい。同じ行の見出しとスパン

出典

2016-05-14 Philippe Brodeur

'テキスト整列：項目が異なるサイズでありながら、ベースラインを整列させるために、稀に、これら（簡単な方法で）問題をadressingされているような多くのソリューションは、ウェブの周りに提案されていることに注意してください属性を持つブロック要素の右側にあるコンテンツ。スパンはインラインです。 h1に 'float：left'、スパンに' float：right'、ラッパーdivに 'overflow：hidden'を試してみましたか？あなたはおそらくより多くのセマンティックマークアップを目指すべきだと言いました。リンクされたスタイルシートは無視されるべきではありません...動的コンテンツは本当に悪いマークアップの言い訳ではありません –

私はfridayを試していたから、 CSSシート）は、ページロード後に動的に追加された要素では無視されますが、通常で、インラインスタイルだけがそのポイントで動作しますが、いいえ、私は浮動小数点で大きな成功を収めていませんでした。右のテキストがベースラインではなく一番上に揃うようにします... –

<div style="background-color:green;color:white; display:flex; justify-content:space-between; align-items:baseline;"> 
 
    <h1>Green, color of hope</h1> 
 
    <span>I hope to display this to the right</span> 
 
</div>

は私が多くをチューニングし、使用することを決定：

<!DOCTYPE html> 
<body> 

<div style="background-color:green;color:white;"> 
    <h1 style="display:inline">Green, color of hope</h1> 
    <span style="text-align:right">I hope to display this to the right</span> 
</div> 

</body> 
</html>

が

出典

2016-05-18 13:17:57

フレキシボックスはそれを行うことができます。通常、我々は同じベースライン上で右へ左とスパンに時間が表示されますこれは私の問題の最も単純な解決策です。 right`インラインを整列：

<style> 
    .left{text-align:left;font-size:18px;font-weight:bold;} 
    .right{float:right;font-size:14px;padding-top:4px} 
</style> 

<span class='left'>Left</span><span class='right'>Right</span>

出典

2016-05-14 21:32:09

スニペットを右および右のテキストをベースラインでなく中央に配置しています。私は本当の目標で明日それを試してみます。 Thanxs。 –

同じ行の見出しとスパン

答えて

関連する問題