Заполнить пространство точками

lyapun · February 25, 2011

Здраствуйте!

Уже 2 дня ломаю голову как сверстать такую штуку:

Слева есть текст длина которого может меняться, справа есть кнопка +1. Пространство между ними заполняется различным количеством точек.

Помогите, пожалуйста!

swetlana · February 25, 2011

точки фоном сделать

lyapun · February 25, 2011

точки фоном сделать

Спасибо. Это я знаю.

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

Не могли бы вы накидать примерный код разметки?

Edited February 25, 2011 by lyapun

psywalker · February 25, 2011

точки фоном сделать

Не верю.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	* { margin: 0; padding: 0;}
	.menu { width: 50%; margin: 0 auto; list-style: none;}
		.menu li { 
			border-bottom: 1px dotted #000; 
			position: relative; 
			padding-right: 40px;
			margin: 3px 0;
		}
		.menu li span { background: #fff; position: relative; bottom: -.3em;}
		.menu li input { padding: 0 5px;  position: absolute; right: 0; bottom: -.3em;}


</style>
</head>

		<ul class="menu">
			<li><span>Тут очень много текста</span><input type="submit" value="+1"></li>
			<li><span>Тут очень много текста</span><input type="submit" value="+1"></li>
			<li><span>Тут очень много текста</span><input type="submit" value="+1"></li>
		</ul>
<body>
</body>
</html>

lyapun · February 25, 2011

Аааа!

Спасибо!!!!!!

psywalker · February 25, 2011

Аааа!
Спасибо!!!!!!

И тебе.

Sign In

Заполнить пространство точками

Question

lyapun

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

swetlana

Link to comment

Share on other sites

lyapun

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

lyapun

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information