라디오 버튼 스타일이 예상대로 표시되지 않습니다.

Question

저는 아주 기본적인 양식을 가지고 있지만 제게 문제가되는 제 3 자 CSS를 사용했습니다. 나는

Mevr.<input type="radio" name="gender" value="Mevr."> 
    Dhr.<input type="radio" name="gender" value="Dhr."> 
    Fam.<input type="radio" name="gender" value="Fam."> 

이

은 내가이 얻을 활성화 타사 CSS로

을 기대하는 것입니다이 CSS에서 꽤 오랫동안 지금 찾았다하지만 원인이 문제 아무것도 찾을 수 없습니다 :

내 질문은 : 내 라디오 버튼을 얻을하는 데 사용할 수있는 무엇 인라인 스타일 옆에 첫 번째 사진에서 서로 좋아하니?

참고 : 문제가 here입니다 원인이 무엇 CSS : 당신이 주어지지 것처럼

Answer 1

coding.You이 시도 할 수 있습니다 :

<style> 
 

 
.some-class { 
 
    float: left; 
 
    clear: none; 
 
} 
 

 
label { 
 
    float: left; 
 
    clear: none; 
 
    display: block; 
 
    padding: 2px 1em 0 0; 
 
} 
 

 
input[type=radio], 
 
input.radio { 
 
    float: left; 
 
    clear: none; 
 
    margin: 2px 0 0 2px; 
 
} 
 
</style> 
 

 

<div class="some-class"> 
 
    <input type="radio" class="radio" name="x" value="y" id="y" /> 
 
    <label for="y">Thing 1</label> 
 
    <input type="radio" class="radio" name="x" value="z" id="z" /> 
 
    <label for="z">Thing 2</label> 
 
    </div>

Answer 2

당신이 didn를하기 때문에 ' 귀하의 게시물에 CSS을 포함 시키면 문제가 무엇인지 말하기 어렵습니다.

input의 display 속성은 block입니다. 이로 인해 줄 바꿈이 발생할 수 있으며 다른 UI 변경 사항이 발생할 수 있습니다 (스크린 샷에 표시됨).

display: inline-block;을 사용하면이 문제를 해결할 수 있습니다. 업데이트 된 질문으로 당

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th { 
 
margin:0; 
 
padding:0; 
 
} 
 

 
input[type="radio"] { 
 
    display: inline-block; 
 
}

Mevr.<input type="radio" name="gender" value="Mevr."> 
 
Dhr.<input type="radio" name="gender" value="Dhr."> 
 
Fam.<input type="radio" name="gender" value="Fam.">

편집는 문제가 input 태그의 width으로 보인다.

당신은 당신의 CSS의 기존로 교체 auto

input { 
 
    border: 1px solid #b0b0b0; 
 
    padding: 3px 5px 4px; 
 
    color: #979797; 
 
    width: auto; 
 
}

Mevr.<input type="radio" name="gender" value="Mevr."> 
 
Dhr.<input type="radio" name="gender" value="Dhr."> 
 
Fam.<input type="radio" name="gender" value="Fam.">

에 width 속성을 설정하려고한다.

메모에. CSS에는 내용 전체에 여러 개의 선언이 있습니다. 고려해보고 불필요한 선언을 제거하십시오.

Answer 3

더미 HTML을 사용했습니다.이 시도 :

<div style="float: left"> 
 
    <input id="RadioButtonList1_0" name="RadioButtonList1" value="One" type="radio"><label for="RadioButtonList1_0">One</label> 
 

 
    <input id="RadioButtonList1_1" name="RadioButtonList1" value="Two" type="radio"><label for="RadioButtonList1_1">Two</label> 
 

 
    <input id="RadioButtonList1_2" name="RadioButtonList1" value="Three" type="radio"><label for="RadioButtonList1_2">Three</label> 
 

 
</div>

우리가 코드를 확인해야합니다