Вопрос по верстке

wuwie · January 19, 2010

Собственно необходимо сверстать то, что изображено на рисунке.

Я сам сделал так :

<ol>

<li><a href="#">Иванов</a>123</li>

<li><a href="#">Петров</a>56</li>

<li><a href="#">Сидоров</a>67</li>

</ol>

Загвоздка в том, как сделать так чтобы в inline элементе li

фамилии выравнивались по левому краю, а рейтинг по правому.

чуствую, что тут необходимо перейти к блочному представлению (display: block)

Подскажите плз.

http://www.zshare.net/image/71415107aaff911e/

shvv · January 19, 2010

Может быть воспользоваться таблицей для представления табличных данных?

CoDy · January 20, 2010

Задать нада ширину контейнера списка

<!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" xml:lang="ru" lang="ru">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style type="text/css">
  * {
	margin: 0;
	padding: 0;
	border: 1px solid #000;
	}
  ol {
	width: 300px;
	margin: 100px;
	}
  ol li {
	text-align: left;
	}
  ol li span {
	display: block;
	float: right;
	}
  </style>
 </head>
 <body>
  <ol>
	<li><a href="#">Иванов</a><span>123</span></li>
	<li><a href="#">Петров</a><span>56</span></li>
	<li><a href="#">Сидоров</a><span>67</span></li> 
  </ol>

 </body>
</html>

Edited January 20, 2010 by CoDy

wuwie · January 20, 2010

Попробовал ваш код.

В фаерфоксе нормально.

В Експлорер 8 рейтинг вниз съезжает

Justnewone · January 20, 2010

Попробовал ваш код.
В фаерфоксе нормально.
В Експлорер 8 рейтинг вниз съезжает

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

wuwie · January 21, 2010

Да, соглашусь с вами.

Пожалуй я применю именно таблицу.

Всем спасибо.

Sign In

Вопрос по верстке

Question

wuwie

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

shvv

Link to comment

Share on other sites

CoDy

Link to comment

Share on other sites

wuwie

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

wuwie

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information