버튼을 오른쪽으로 이동하는 방법?

나는 사용자가 플러스 버튼을 클릭 할 때마다 모달 윈도우를 표시합니다. here이 있습니다.버튼을 오른쪽으로 이동하는 방법?

문제는 "이전 질문"과 같은 줄에 창의 오른쪽에 닫기 단추를 표시하고 싶습니다. 그러나 그것은 전혀 움직이지 않는 것처럼 보입니다. 내가 도대체 뭘 잘못하고있는 겁니까? 이하

코드이다

HTML :

<div class="previouslink"> 
<h1>PREVIOUS QUESTIONS</h1> 

<button type="button" id="close" onclick="return closewindow();">Close</button> 
</div>

CSS :

H1로서

#close{ 
    float:right; 
    display:block; 
    margin-right:0px; 
    clear:left; 
}

@cdhowie와 같은 줄에 있지 않습니다! – drublic

덧붙여서 :'display : block'은'left' 또는'right' 값을 가진'float'-property를 추가 할 때 모든 브라우저에서 기본적으로 적용됩니다. 다시 쓰지 않아도됩니다. – drublic

QandATableStyle2.css 파일에 오류가 있습니다. 후 ; 제거

.previouslink{ 
display:none; 
};

그리고 그것은 잘 작동합니다. ; 문자로 인해 정의가로드되지 않습니다.

2012-05-22 21:57:08 WojtekT

그 질문에 대답하지 않지만 그래, 그게 CSS 파일의 실수 야. – drublic

질문에 답합니다. ';'는 정의를 닫기를 막는다. – WojtekT

@WojtekT, 좋은 캐치! :) – Zuul

는 그것을 지탱하는 행의 전체 폭을 얻어, 블록 요소 . 즉,-property가 적용된 경우에도 H1 요소 뒤에 오는 요소는 같은 줄에있을 수 없습니다.

당신은 요소에

position: absolute; 
top: 0; 
right: 0;

을 추가 할 수 있습니다 중 하나. 또는이 요소에 대해 음수 여백을 추가하십시오. 그 외에도 H1 요소에 float: left;을 추가하는 것도 가능합니다. 이 경우 플로팅 및 줄 바꿈에 특정 문제가 발생할 수 있습니다.

-element 앞에 H1을 추가 할 수도 있습니다. 이렇게하면 H1이 줄의 모든 공간을 차지하는 것을 막을 수 있지만 공간이있는 닫힌 요소를 인식합니다.

2012-05-22 21:56:51 drublic

이 답변의 이유가 확실하지 않은 이유는 무엇입니까? 'position : absolute' 접근 방식이 최선의 선택입니다. – thirtydot

고마워요, @thirtydot! 나는 어떤 사람들은 '위치 : 절대'가 모든면에서 나쁜 것이라고 생각한다. 왜냐하면 그들은 그 안에있는 위대함을 알지 못하기 때문이다. – drublic

단추를 이동하는 다른 방법을 설명하지만 현재 방법이 작동하지 않는 이유를 설명하지 못합니다. –

<h1> 요소에 display: inline;을 적용하면 <button> (또는 인라인)을 같은 줄에 렌더링 할 수 있습니다.

헤더와 버튼 사이에 다음과 같은 내용이 나타나지 않게하려면 다음 요소를 clear: both;으로 스타일을 지정해야합니다.

this example을 참조하십시오.

2012-05-22 22:01:43 cdhowie

답변