radio и текст

html · December 31, 2009

помогите, пожалуйста, кроссбраузерно (ие7 +, ff 1.5 +, google chrome, safari 3.0 +, opera 9.0) расположить текст справа от radio. пробовал так:

input.radio{float:left; margin:0 -18px 0 0;}
label{display:block; margin:-1px 0 3px 18px; font-size:14px;}

но в ие 7 текст смещается вниз ((

весь код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<style type="text/css">
		html{width:100%; height:100%;}
		body{position:relative; width:1024px; height:100%; margin:0 auto; padding:0; color:#000; font:normal 11px Arial, Helvetica, sans-serif; line-height:1;}
		html, div, dl, dt, dd, ul, li, ul li, h1, h2, p, form, fieldset, input, label, legend, img, a{margin:0; padding:0; border:0; outline:0; vertical-align:baseline;}
		ul, li, ul li{list-style:none;}

		.quest{margin:0 0 10px 0; color:#333; font-weight:bold; font-size:14px;}
		input.radio{float:left; margin:0 -18px 0 0;}
		label{display:block; margin:-1px 0 3px 18px; font-size:14px;}
	</style>
</head>
<body>
	<form action="">
		<fieldset>
			<div class="quest">Lorem ipsum dolor sit amet, consectetur adipiscing elit.?</div>
			<ul>
				<li>
				<input type="radio" class="radio" name="vote" value="1" />
				<label>Pellentesque id turpis at leo dapibus</label>
				</li>
				<li>
				<input type="radio" class="radio" name="vote" value="2" />
				<label>Pellentesque id turpis at leo dapibus</label>
				</li>
				<li>
				<input type="radio" class="radio" name="vote" value="3" />
				<label>Pellentesque id turpis at leo dapibus</label>
				</li>
				<li>
				<input type="radio" class="radio" name="vote" value="4" />
				<label>Pellentesque id turpis at leo dapibus</label>
				</li>
			</ul>
		</fieldset>
	</form>
</body>
</html>

п.с. с наступающим!

можно исправить margin'ом завернув код в комментарии, но хотелось бы один общий код.

mishka · December 31, 2009

.radio{float:left;width:16px;height:16;margin:0 8px 0 0;padding:0}

label{float:left}

Edited December 31, 2009 by mishka2

psywalker · December 31, 2009

<label><input type="radio" class="radio" name="vote" value="3" />Pellentesque id turpis at leo dapibus</label>

mishka · December 31, 2009

иногда дизайн такой что чекбокс и радиоинпут без флота невыровнять кроссбраузерно.

Но если есть возможность то лучше не флотать а сделать так как показал psywalker

html · December 31, 2009

		.radio{float:left; width:16px; height:16; margin:0 8px 0 0; padding:0}
		label{display:block; margin:-1px 0 3px 18px; font-size:14px;}

	<form action="">
		<fieldset>
			<div class="quest">Lorem ipsum dolor sit amet, consectetur adipiscing elit.?</div>
			<ul>
				<li>
				<label>
					<input type="radio" class="radio" name="vote" value="1" />
					Pellentesque id turpis at leo dapibus
				</label>
				</li>
				<li>
				<label>
					<input type="radio" class="radio" name="vote" value="2" />
					Pellentesque id turpis at leo dapibus
				</label>
				</li>
				<li>
				<label>
					<input type="radio" class="radio" name="vote" value="3" />
					Pellentesque id turpis at leo dapibus
				</label>
				</li>
				<li>
				<label>
					<input type="radio" class="radio" name="vote" value="4" />
					Pellentesque id turpis at leo dapibus
				</label>
				</li>
			</ul>
		</fieldset>
	</form>

Justnewone · December 31, 2009

float:left; не надо

html · December 31, 2009

<label><input type="radio" class="radio" name="vote" value="3" />Pellentesque id turpis at leo dapibus</label>

вставил код не внося изменений в стили, всё равно есть смещение.

Justnewone · December 31, 2009

вставил код не внося изменений в стили, всё равно есть смещение.

Какие смещения?

.radio{float:left; /* Это тут не нужно */ width:16px; height:16; margin:0 8px 0 0; padding:0}

mishka · December 31, 2009

Вопервых если флотаешь то родителю overflow:hidden;

<label><input type="radio" name="vote"  />Pellentesque id turpis at leo dapibus</label>

Сделай такой хтмл, убери все стили. И заново пиши стили, тогда быстрее поймешь что как работает.

Хотя как по мне сунуть инпуты в лейблы это неправильно.

html · January 3, 2010

С новым годом!

теперь смещение идёт вниз во всех браузерах кроме ие 7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<style type="text/css">
		html{width:100%; height:100%;}
		body{position:relative; width:1024px; height:100%; margin:0 auto; padding:0; color:#000; font:normal 11px Arial, Helvetica, sans-serif; line-height:1;}
		html, div, dl, dt, dd, ul, li, ul li, h1, h2, p, form, fieldset, input, label, legend, img, a{margin:0; padding:0; border:0; outline:0; vertical-align:baseline;}
		ul, li, ul li{list-style:none;}
		fieldset{overflow:hidden; width:100%;}

		.quest{margin:0 0 10px 0; color:#333; font-weight:bold; font-size:14px;}
		.radio{width:16px; height:16px; margin:0 3px 0 0; padding:0;}
		label{font-size:14px;}
	</style>
</head>
<body>
	<form action="">
		<fieldset>
			<div class="quest">Lorem ipsum dolor sit amet, consectetur adipiscing elit.?</div>
			<ul>
				<li>
				<label>
					<input type="radio" class="radio" name="vote" value="1" />
					Pellentesque id turpis at leo dapibus
				</label>
				</li>
				<li>
				<label>
					<input type="radio" class="radio" name="vote" value="2" />
					Pellentesque id turpis at leo dapibus
				</label>
				</li>
				<li>
				<label>
					<input type="radio" class="radio" name="vote" value="3" />
					Pellentesque id turpis at leo dapibus
				</label>
				</li>
				<li>
				<label>
					<input type="radio" class="radio" name="vote" value="4" />
					Pellentesque id turpis at leo dapibus
				</label>
				</li>
			</ul>
		</fieldset>
	</form>
</body>
</html>

psywalker · January 3, 2010

Попробуй vertical-align: middle;

html · January 3, 2010

Попробуй vertical-align: middle;

при vertical-align: bottom; почти идентично, но в опере отображается как vertical-align:middle;

psywalker · January 3, 2010

при vertical-align: bottom; почти идентично, но в опере отображается как vertical-align:middle;

используй хак для оперы, и в ней отдельно опусти радиобатонны

mishka · January 4, 2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body{
	margin:0;
	font:14px Arial, Helvetica,sans-serif;
}
form,fieldset{
	margin:0;
	padding:0;
	border:0;
}
form{
	line-height:16px;
}
ul{
	list-style:none;
	margin:40px;
	padding:0;
}
li{
	overflow:hidden;
	_zoom:1;
}
.radio{
	width:16px;
	height:15px;
	margin:0 3px 0 0;
	padding:0;
	vertical-align:middle;
	float:left;
}
</style>
</head>
<body>
	<form action="#">
		<fieldset>
			<ul>
				<li><label><input type="radio" class="radio" name="vote" />Pellentesque id turpis at leo dapibus</label></li>
				<li><label><input type="radio" class="radio" name="vote" />Pellentesque id turpis at leo dapibus</label></li>
				<li><label><input type="radio" class="radio" name="vote" />Pellentesque id turpis at leo dapibus</label></li>
				<li><label><input type="radio" class="radio" name="vote" />Pellentesque id turpis at leo dapibus</label></li>
			</ul>
		</fieldset>
	</form>
</body>
</html>

Так пойдет?

Sign In

radio и текст

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information