긴 라벨이있는 라디오 버튼이 Firefox와 IE8에는 올바르게 표시되지만 IE7과 IE6에는 올바르게 표시되지 않습니다.IE7 문제의 긴 라벨 라디오 버튼
기본적으로, 나는 다음과 같다 원하는 (O 라디오 버튼입니다) :
내 CSS는 :
IE7과 IE6에서label {
float:none;
padding-left: 15px;
text-align:left;
width:420px;
display:block;
margin-left; 10px;
}
, 다음 줄은 없습니다 이것은 나를 위해 작동 라벨
<!doctype html>
<html>
<head>
<title></title>
<style>
html {
font: 12px sans-serif;
}
form
ul {
list-style: none;
margin: 0;
padding: 0;
width: 400px;
}
label {
cursor: pointer;
}
input {
float: left;
}
</style>
</head>
<body>
<form action="">
<ul>
<li>
<label><input type="radio" name="authorise"> I/we authorise WITHDRAWALS from my Investec account to and DIRECT DEBITS from this designated account</label>
</li>
<li>
<label><input type="radio" name="authorise"> I/we authorise WITHDRAWALS ONLY from my account to this designated account</label>
</li>
<li>
<label><input type="radio" name="authorise"> I/we authorise DIRECT DEBITS ONLY from this designated account to my account</label>
</li>
</ul>
</form>
</body>
</html>
의 첫 번째 단어의 첫 글자에서, 라디오 버튼 아래 IE8, IE7 및 FF; 나는 IE6을 테스트 할 곳이 없지만 접근 방식은 건전해야합니다. HTML을 편집 할 자유가 있다고 가정합니다.
기본적으로 레이블에 왼쪽 패딩을 추가하고 위치 : relative를 사용하여 자식이 위치를 상속 받도록 설정 한 다음 라디오 버튼의 position : absolute를 사용하여 해당 패딩에 배치합니다.
는 HTML :
는<label><input type="radio" />I/we authorise WITHDRAWALS from my Investec account to and DIRECT DEBITS from this designated account</label>
<label><input type="radio" />I/we authorise WITHDRAWALS ONLY from my account to this designated account</label>
<label><input type="radio" />I/we authorise DIRECT DEBITS ONLY from this designated account to my account</label>
CSS : 사람들이 물건을 downvote하려는 경우
label { position:relative;top:0; padding-left:25px; text-align:left; width:420px; display:block; }
label input { position:absolute; top:0;left:0; }
, 그들은 적어도 이유를 말할 수 있습니다.
레이블 폭을 늘리면됩니다. 어쩌면 인라인 태그를 사용할 수 있습니다.
<label style="width:420">
또는 레이블의 CSS 속성에 추가 할 수 있습니다.
당신도이 답변에 만족하지 못하는 것 같지만 누군가가 하향 투표를하면 화가납니다. – reisio