CSS 위치 지정

내 HTML 문서에 메시지와 라디오 박스가 있습니다. 두 가지를 나란히 표시하고 싶습니다. 메시지는 왼쪽에 정렬되고 오른쪽에 정렬되고 오른쪽에 정렬됩니다. 나는 CSS를 사용하여 "디스플레이 : 인라인"컨테이너를 시도했지만 작동하지 않았다. 여기에 코드입니다 :CSS 위치 지정

HTML :

<div id="test-div"> 
    <p>Current time: <span id="current-time"></span></p> 
    <fieldset id="fieldset-options"> 
    <legend>My Options</legend> 
    <input id="opt1" type="radio" name="grp-options" value="1"> 
    <label id="label-opt1" for="opt1">First Option</label><br/> 
    <input id="opt2" type="radio" name="grp-options" value="2"> 
    <label id="label-opt2" for="opt2">Second Option</label><br/> 
    <input id="opt3" type="radio" name="grp-options" value="3"> 
    <label id="label-opt3" for="opt3">Third Option</label><br/> 
    </fieldset> 
</div>

CSS :

#test-div { 
    font-size : 18px; 
    font-weight: bold; 
    margin-bottom: 20px; 
    position: relative; 
    //display: inline;   
} 


#test-div #fieldset-options legend { 
    font-size: 16px; 
    font-weight : bold; 
} 

#test-div #fieldset-options { 
    font-size : 14px; 
    font-weight: normal; 
    width: 350px; 
    position: absolute; 
    right: 0px; 
}

이 jsfiddle link입니다. 이것을 올바르게 조정하는 방법을 알려주십시오.

출처

2012-11-09 Methos

여기에 모두 설명되어 있습니다. http://www.alistapart.com/articles/prettyaccessibleforms –

@Diodeus, 링크를 통해 그것을 주셔서 감사합니다. – Methos

정확히 무엇을 달성하려고하는지 명확하지 않습니다. 이게 뭔가?

http://jsfiddle.net/R6HHK/19/

I 단순히 p 및 radiobox 용기를 폭 준하고,이 요소를 부유.

출처

2012-11-09 19:47:00 Nix

그래, 그게 내가 뭘 하려는지, 감사합니다 – Methos

무엇을이 일에 대해 : 당신의 # 테스트 DIV 번호 필드 셋 - 옵션 선택에서 위치와 폭을

#test-div > p{float:left;}

을 다음 제거 :

당신의 CSS에이 코드를 추가합니다.

원하는 것은 무엇입니까?

출처

2012-11-09 19:47:45

왼쪽으로 시간을두고 필드 세트를 오른쪽으로 띄웁니다.

#test-div p { 
    float:left; 
    margin:0; 
} 
#test-div fieldset { 
    float:right; 
}

jsFiddle example

당신은 취소 할 수 있습니다 (clear:both) 그 아래에 떠 수도, 그렇지 않으면 다른 요소 바로 뒤에 오는 내용

출처

2012-11-09 19:49:25 j08691

맑음에 대한 좋은 지적. 나는 당신이 말하는 것과 똑같은 경험을했습니다. – Methos

CSS 위치 지정

답변

관련 문제