標題和跨度在同一行

-4

我正在動態生成div，並且需要與此類似的解決方案（無外部樣式或css，因爲在頁面加載後動態生成時會忽略它們）。我不明白爲什麼瀏覽器忽略我的文本對齊：正確。我也想保持h和跨度（不是p）。通常情況下，我們應該看到h至左，跨度向右上相同的基線：標題和跨度在同一行

<!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-14 Philippe Brodeur

'的text-align：right'對齊內嵌內容到具有屬性的塊元素的右側。跨度是內聯的。你是否在span上使用了'float：left'，在span上使用了'float：right'，在wrapper div上使用了'overflow：hidden'。說你應該瞄準更多的語義標記，而不應該忽略鏈接的樣式表...動態內容並不是真正的糟糕標記的藉口 –

從我試過的星期五，任何我會添加樣式標籤（或一個CSS表格）會在頁面加載後動態添加的元素上被忽略，所以我認爲這是正常的，只有內聯樣式才能工作。沒有，我也沒有取得很大的成功與浮動或者，導致右邊的文本排列頂部，而不是基線... –

我調整了很多，決定使用這是我的問題的最簡單的解決方案。需要注意的是儘可能多的解決方案是各地的網絡提出的，罕見的是那些adressing（以簡單的方式）問題的項目是，同時不同大小的基線對齊：

<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-18 13:17:57

Flexbox，就可以做到這一點：

<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>

來源

2016-05-14 21:32:09

我現在正在運行代碼段，正確的文本在中間對齊，而不是在基線。我明天會試試我的真實目標。 Thanxs。 –

標題和跨度在同一行

回答

相關問題