그래서 멋진 라디오 버튼을 만들려고 노력 중이며 좀 이상한 효과가 있습니다. 그들 모두 유니폼을 크기로 만들고 싶습니다만, 스팬이 한두 줄인지에 따라 다른 크기가 달라집니다. 싱글 라이너의 버튼 이름 끝에 <br> 을 추가하여 문제를 해결할 수있는 "해킹"을 할 수 있지만, 그다지 재미 있지는 않습니다.왜 단일 라인 스팬이 더 큰 버튼을 생산합니까?
이 시점에서 CSS는 문제이므로 JS를 제거했습니다.
http://jsfiddle.net/aslum/BMbN2/2/
나는 display: inline-block 도랑 당신은 당신이 원하는 위치에 버튼을 얻기 위해 약간 다른 값을 조정할 필요가 있습니다 float:left
을 선택하는 것입니다.
이미지는 텍스트의 마지막 줄 기준선에 맞춰 정렬됩니다. .genreName을 추가하면 vertical-align:top을 제거한 것으로 보입니다.
'수직 정렬'CSS 속성에 익숙해 지세요. 이런 경우에는 매우 유용합니다. http://www.w3schools.com/cssref/pr_pos_vertical-align.asp - 또한 "선 높이"는 인라인 블록 요소의 높이에 중요한 중요성을 가지고 있습니다. 이것을 적절하게 조정해야합니다.
"세로 정렬 : 중간;" #Action_ 모험, # 오디오 북, #Biography _Memoir 및 # Chick-Lit 요소. 또한 '.genreName'클래스에서 높이를 제거해야합니다. 이것은 조금 더 나은 모양으로 물건을 얻을 것입니다. 또한 라디오 버튼을 자신의 div에 랩핑하고 오른쪽으로 띄우는 것이 좋습니다.
코드에 문제가있는 것은 스팬과 라디오 버튼이 모두 블록으로 렌더링된다는 것입니다. 왼쪽의 스팬이 더 많은 공간을 차지하면 라디오 버튼이 아래로 밀려납니다. 브라우저에서 렌더링되는 방법에 따라 다릅니다.
동일한 높이에서 서로 옆에 배치되기를 원한 것처럼 보입니다. float : left 및 float : right를 사용해야합니다.
또한 컨테이너 내의 모든 요소를 플로팅하면 컨테이너 높이가 0px가됩니다. 따라서 배경색이 보이지 않습니다. 이 문제를 해결하려면 끝에 일반적으로
을 포함하는 컨테이너에 요소를 하나 더 추가합니다. 여기서 .clearfix의 스타일은 'clear : both'입니다. 그러면 .clearfix 요소가 부유 요소를보고 강제로 그 아래에 위치하게됩니다. float 요소가 끝나는 위치와 동일한 높이 값을 갖도록 컨테이너를 강요합니다. – patmacs