Кнопки позиционирования с использованием CSS без таблиц

Question

Я тяну свои волосы сюда, пытаясь заставить CSS позиционировать только несколько элементов html.

Вот код: http://jsfiddle.net/7pTL8/

То, что я хочу, чтобы «person@business.com [v]», чтобы быть в верхнем правом углу, а затем под него «Средняя глубина», «[х] «Настройки» и «Прошедшие 24 часа [v]» отображаются вместе на одном уровне. Я пробовал поплавки, и у меня были странные результаты. Я не хочу прибегать к использованию таблицы здесь, потому что все, что я читал о CSS, предполагает использование таблиц для макета - это плохое решение.

Answer 1

Его не так туф, как вы думаете .. здесь мало решение .. его не очень хорошо, но это может решить проблему вам сейчас ..

[ссылка] http://jsfiddle.net/7pTL8/2/

<div id="user-selection">person@business.com [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; 
    } 

Answer 2

<span> элементы используют display:inline, а <h1> элементы используют block по умолчанию. Вручную переопределить # граф-заголовок использовать display:inline и он будет выстраиваться с остальной частью ваших элементов:

#graph-title 
{ 
    display:inline;  
} 
​ 

Answer 3

Ваша проблема, вероятно, является использование h1 элемента. По умолчанию h1 имеет стиль display: block. Если вы добавите стиль display: inline, все будет хорошо.

EDIT: Я думаю, вы должны использовать span для него, если у вас нет каких-либо особых причин.