OL li

Lincky · May 14, 2009

и так, есть список:

<ol>

</ol>

как сделать, чтобы для первой строки li был отступ слева, причем нумерация была прилеплена к тексту???

Nekromancer · May 14, 2009

ol li {margin:0; padding: 0; text-indent: 15px;}

но не уверен. номер по моему в разных браузерах по разному будет стоять.

Lincky · May 14, 2009

ol li {margin:0; padding: 0; text-indent: 15px;}
но не уверен. номер по моему в разных браузерах по разному будет стоять.

если бы это работало, то я бы тему не создавал.

psywalker · May 14, 2009

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body {  margin:0 10em;}
	   ol li:first-child { list-style: none; text-indent: 1em;}
</style>
</head>

<body>
<ol>
   <li>1. бла-бла-бла</li>
   <li>бла-бла-бла</li>
   <li>бла-бла-бла</li>
   <li>бла-бла-бла</li>
   <li>бла-бла-бла</li>
</ol>
</body>
</html>

Lincky · May 14, 2009

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body {  margin:0 10em;}
	   ol li:first-child { list-style: none; text-indent: 1em;}
</style>
</head>

<body>
<ol>
   <li>1. бла-бла-бла</li>
   <li>бла-бла-бла</li>
   <li>бла-бла-бла</li>
   <li>бла-бла-бла</li>
   <li>бла-бла-бла</li>
</ol>
</body>
</html>

все бы хорошо, но только для 1-го элемента списка это.

для каждого li классов не должно быть. хотя можно поставить, но работать все равно не будет

Описание

Псевдокласс first-child добавляет стилевое оформление к первому дочернему элементу селектора, который расположен в дереве элементов документа.

Edited May 14, 2009 by Lincky

psywalker · May 14, 2009

все бы хорошо, но только для 1-го элемента списка это.
для каждого li классов не должно быть. хотя можно поставить, но работать все равно не будет

Извините, я не понял вашу цель, можно поподробнее?

Описание
Псевдокласс first-child добавляет стилевое оформление к первому дочернему элементу селектора, который расположен в дереве элементов документа.

И что?

Edited May 14, 2009 by psywalker

Nekromancer · May 14, 2009

ol li {margin: 0; padding: 0; text-indent:0; margin-left: 5px;}
ol p {text-indent: 10px;}

<ol>
<li><p>бла-бла-бла</p></li>
</ol>

Lincky · May 14, 2009

ol li {margin: 0; padding: 0; text-indent:0; margin-left: 5px;}
ol p {text-indent: 10px;}

<ol>
<li><p>бла-бла-бла</p></li>
</ol>

хотелось бы попросить, предлагать рабочие варианты.. а идея вообще неплохая. только вот номер не сдвигается

Извините, я не понял вашу цель, можно поподробнее?

в нумерованном списке несколько позиций, т.е. несколько <li>...

в <li> есть текст. Может быть одна, две строки, 3....

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

Извините, я не понял вашу цель, можно поподробнее?

в нумерованном списке несколько позиций, т.е. несколько <li>...

в <li> есть текст. Может быть одна, две строки, 3....

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

psywalker · May 14, 2009

Lincky

Послушайте, вы попросили

как сделать, чтобы для первой строки li был отступ слева, причем нумерация была прилеплена к тексту???

Я вам привёл решение, в чём проблема?Не нравиться :first-child, сделайте класс у первой строки , в чём проблема?

Lincky · May 14, 2009

Lincky
Послушайте, вы попросили
Я вам привёл решение, в чём проблема?Не нравиться :first-child, сделайте класс у первой строки , в чём проблема?

не для первого <li>, а для первой строки текст внутри <li>

Извините, я не понял вашу цель, можно поподробнее?

в нумерованном списке несколько позиций, т.е. несколько <li>...

в <li> есть текст. Может быть одна, две строки, 3....

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

Извините, я не понял вашу цель, можно поподробнее?

в нумерованном списке несколько позиций, т.е. несколько <li>...

в <li> есть текст. Может быть одна, две строки, 3....

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

psywalker · May 14, 2009

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body {  margin:0 10em;}
	 ol li p { text-indent: 2em;}
	 ol li:first-child { list-style: none;}


</style>
</head>

<body>
<ol>
   <li><p>1. бла-бла-блаj  sdfjksdkf df fd fkfkfkd<br />dfasf df fd </p></li>
   <li>бла-бла-бла</li>
   <li>бла-бла-бла</li>
   <li>бла-бла-бла</li>
   <li>бла-бла-бла</li>
</ol>
</body>
</html>

пойдёт?

Lincky · May 14, 2009

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body {  margin:0 10em;}
	 ol li p { text-indent: 2em;}
	 ol li:first-child { list-style: none;}


</style>
</head>

<body>
<ol>
   <li><p>1. бла-бла-блаj  sdfjksdkf df fd fkfkfkd<br />dfasf df fd </p></li>
   <li>бла-бла-бла</li>
   <li>бла-бла-бла</li>
   <li>бла-бла-бла</li>
   <li>бла-бла-бла</li>
</ol>
</body>
</html>

пойдёт?

да нет же....

неужели не понятен мой вопрос??

Nekromancer · May 14, 2009

ol li {margin: 0; padding: 0; text-indent:-10px; margin-left: 15px;}
ol p {text-indent: 10px;}

Проверил

psywalker, причём тут первый ребёнок?

неужели не понятен мой вопрос??

да всё понятно

Edited May 14, 2009 by Nekromancer

Lincky · May 14, 2009

http://forum.htmlbook.ru/style_images/eleg...mage-button.png

ol li {margin: 0; padding: 0; text-indent:-10px; margin-left: 15px;}
ol p {text-indent: 10px;}
Проверил
psywalker, причём тут первый ребёнок?
да всё понятно

вот и славно...

тогда все вместе ищем решение))

psywalker · May 14, 2009

Nekromancer

psywalker, причём тут первый ребёнок?

Я просто не понял вопроса сначала)), хотя и сейчас не совсем понятно, он же вроде хотел, чтобы номер прилегал к тексту?

вот и славно...
тогда все вместе ищем решение))

Это означает, что решение не найдено ещё?

Твой рисунок не изображается:

http://forum.htmlbook.ru/style_images/eleg...mage-button.png

Edited May 14, 2009 by psywalker

Lincky · May 14, 2009

Nekromancer
Я просто не понял вопроса сначала)), хотя и сейчас не совсем понятно, он же вроде хотел, чтобы номер прилегал к тексту?

не только хотел, а до сих пор хочу...

вся загводка в этом гребаном номере..

а вообще задачу я решил, но пришлось в каждом <LI> писать номер

psywalker · May 14, 2009

Lincky

а вообще задачу я решил, но пришлось в каждом <LI> писать номер

А покажи код ради интереса, всё таки узнать, чтоже ты хотел на самом деле

Lincky · May 14, 2009

Lincky
А покажи код ради интереса, всё таки узнать, чтоже ты хотел на самом деле

подскажи как тут картинку вставить!

psywalker · May 14, 2009

1) 5-ый квадратик слева, верху, где пишешь сообщение

2) Вставляешь в окошко адрес полный и всё

Lincky · May 14, 2009

1) 5-ый квадратик слева, верху, где пишешь сообщение
2) Вставляешь в окошко адрес полный и всё

так там надо вводить url картинки

psywalker · May 14, 2009

да

Lincky · May 14, 2009

да

фигово..

<ol>
                    <li>1. Заполните заявку на лечение on-line и пришлите нам по факсу 8 10 49 21 61 200 610 либо по e-mail (или пришлите нам сообщение в
                    произвольной форме с указанием ваших контактных данных).</li>
                    <li>2. На основании Вашего запроса мы бесплатно подготовим предложение по лечению, включающее проведение контрольного обследования с целью
                    уточнения диагноза, программу лечения с указанием продолжительности лечения и стоимости, пакет сервисных услуг и их стоимость.
                    Предложение может быть скорректировано в зависимости от Ваших пожеланий.</li>
                    <li>3. Если наше предложение заинтересовало пациента, и он готов поехать на лечение, мы высылаем инвойс на оплату.</li>
                    <li>4. При необходимости может быть заключен договор об оказании услуг с пациентом или с его спонсором.</li>
                </ol>

—-css—
ol {
	padding: 0 0 1em 0
}
ol li {
	text-indent: 1em;
	padding-bottom: 1.1em;
}
ol li p {
	padding: 0;
	text-indent: 2.2em;
	}

фигово..

<ol>
                    <li>1. Заполните заявку на лечение on-line и пришлите нам по факсу 8 10 49 21 61 200 610 либо по e-mail (или пришлите нам сообщение в
                    произвольной форме с указанием ваших контактных данных).</li>
                    <li>2. На основании Вашего запроса мы бесплатно подготовим предложение по лечению, включающее проведение контрольного обследования с целью
                    уточнения диагноза, программу лечения с указанием продолжительности лечения и стоимости, пакет сервисных услуг и их стоимость.
                    Предложение может быть скорректировано в зависимости от Ваших пожеланий.</li>
                    <li>3. Если наше предложение заинтересовало пациента, и он готов поехать на лечение, мы высылаем инвойс на оплату.</li>
                    <li>4. При необходимости может быть заключен договор об оказании услуг с пациентом или с его спонсором.</li>
                </ol>

—-css—
ol {
	padding: 0 0 1em 0;
list-style: none
}
ol li {
	text-indent: 1em;
	padding-bottom: 1.1em;
}
ol li p {
	padding: 0;
	text-indent: 2.2em;
	}

Great Rash · May 14, 2009

Может я недопонял вопроса, но почему не подходит такое?

Вообще хотелось бы посмотреть на картинку того, что нужно получить...

<ol style="width: 200px; list-style-position: inside;">
	<li>text text text text text text text text text text text text text</li>
	<li>text text text text text text text text text text text text text</li>
	<li>text text text text text text text text text text text text text</li>
	<li>text text text text text text text text text text text text text</li>
</ol>

Lincky · May 15, 2009

Может я недопонял вопроса, но почему не подходит такое?
Вообще хотелось бы посмотреть на картинку того, что нужно получить...
<ol style="width: 200px; list-style-position: inside;">
	<li>text text text text text text text text text text text text text</li>
	<li>text text text text text text text text text text text text text</li>
	<li>text text text text text text text text text text text text text</li>
	<li>text text text text text text text text text text text text text</li>
</ol>

надо бы еще циферку правее сместить, чтобы вторая строка на пикселей 10 выступала))

Great Rash · May 15, 2009

Дык пожалуйста:

<ol style="width: 200px; list-style-position: inside; text-indent: 10px;">
	<li>text text text text text text text text text text text text text</li>
	<li>text text text text text text text text text text text text text</li>
	<li>text text text text text text text text text text text text text</li>
	<li>text text text text text text text text text text text text text</li>
</ol>

Lincky · May 15, 2009

Дык пожалуйста:

<ol style="width: 200px; list-style-position: inside; text-indent: 10px;">
	<li>text text text text text text text text text text text text text</li>
	<li>text text text text text text text text text text text text text</li>
	<li>text text text text text text text text text text text text text</li>
	<li>text text text text text text text text text text text text text</li>
</ol>

наконец-то! спасибо. задача решена самым оптимальным образом.

и напоследок, как начать нумерацию с 5 для валидности XHTML 1.0 Strict

Sign In

OL li

Question

Link to comment

Share on other sites

28 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

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