2012-06-19 2 views
0

나는 CSS를 사용하여 소수의 html 요소를 배치하려고한다. 여기 표가없는 CSS를 사용하는 위치 지정 버튼

코드입니다 : 내가 원하는 것은 ""평균 깊이 "" [email protected] [V] "오른쪽 상단 후 이하로입니다 http://jsfiddle.net/7pTL8/

[X] 설정 "및"지난 24 시간 [v] "가 모두 동일한 레벨로 함께 표시됩니다. 나는 수레를 시도하고 이상한 결과가났다. 나는 CSS에 대해 읽은 모든 것이 레이아웃 용 테이블을 사용하는 것이 좋지 않은 해결책이라고 제안하기 때문에 여기서 테이블을 사용하는 것에 의지하고 싶지 않습니다.

+0

원하는 리터의 이미지를 게시 시도 사람들이 질문에 대답 할 때 이해하기가 훨씬 쉬울 것입니다. – wsanville

답변

1

아니고 당신이 생각하는 응회암으로 .. .. 여기 .. ​​소형 솔루션 매우 좋지 않다하지만 지금은 당신에게 문제를 해결할 수

[링크] 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; 
    } 

1

<span> 요소는 display:inline이고, <h1> 요소는 기본적으로 block입니다. 수동 display:inline를 사용하는 # 그래프 제목을 무시하고 당신의 요소의 나머지 부분과 정렬됩니다

#graph-title 
{ 
    display:inline;  
} 
​ 
+0

H1 요소는'block'이며, 기본적으로'inline-block'이 아닙니다. –

+0

고마워요! 내 대답을 업데이트했습니다. – BumbleB2na

1

당신의 문제는 아마 h1 요소의 사용이다. 기본적으로 h1의 스타일은 display: block입니다. display: inline 스타일을 추가하면 문제가 없습니다.

편집 : 난 당신이 당신이 어떤 특별한 이유가없는 경우에 대한 span를 사용한다고 생각합니다.