使用無表格的CSS定位按鈕

我在這裏拉我的頭髮試圖讓CSS定位少數html元素。使用無表格的CSS定位按鈕

我要的是「[email protected] [V]」是在右上角，然後它下面的「平均深度」，「[X]設置「和」過去24小時[v]「全部在同一級別顯示。我試過花車，結果很奇怪。我不想在這裏使用表格，因爲我讀到的關於CSS的所有內容都建議使用表格進行佈局，這是一個糟糕的解決方案。

來源

2012-06-19 Lightbeard

嘗試發佈您的期望L的圖像在回答這個問題時，人們會更容易理解。 – wsanville

它並不像你想象的凝灰岩.. 這裏是小的解決方案。它的不是很好，但它可以解決你現在的問題..

[鏈接] http://jsfiddle.net/7pTL8/2/

<div id="user-selection">[email protected] [v]</div> 
<div id="settings-container"> 
<h1 id="graph-title">Average Depth</h1> 
<span id="settings-button">[x] Settings</span> 
<span id="timeframe-dropdown">Past 24 hours [v]</span> 
</div>

CSS

#graph-title { 
    position:absolute; 
    left:1px; 
    text-align: left; 
} 

#settings-container { 
    text-align: right; 
    }  

#user-selection { 
    text-align: right; 
    }

來源

2012-06-19 15:11:32

<span>元素使用display:inline，而<h1>元素默認使用block。手動覆蓋＃圖形的標題使用display:inline，它會排隊與其餘元素：

#graph-title 
{ 
    display:inline;  
}

來源

2012-06-19 14:50:27 BumbleB2na

H1元素是'block'，默認情況下不是'inline-block'。 –

謝謝！我已經更新了我的答案 – BumbleB2na

你的問題很可能是使用h1元素。默認h1的樣式爲display: block。如果你添加風格display: inline它會沒事的。

編輯： 我認爲你應該使用span它，如果你沒有任何特別的原因。

來源

2012-06-19 14:54:07

使用無表格的CSS定位按鈕

回答

相關問題