Денис, спасибо за ответ. но я думал у задачи будет простое решение. Я ищу решение для реализации шкалы прогресса проекта

yurgeman, 245 просмотров

Оригинал: http://otvety.google.ru/otvety/thread?tid=000026819c5d2a2e

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

Эта конструкция - индикатор прогресса выполнения проекта, где:

"main-container" - проект
"container" - веха в проекте
"item" - стадия (задача, группа задач. Но отображается как один элемент) в проекте

В идеале структура будет следующей:

контейнер "main-container" - один
количество контейнеров "container" - неизвестно
количество контейнеров "item" в каждом контейнере "container" - неизвестно

<div class="main-container">
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
</div>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</div>

Примечание:
такой вариант не подойдет - http://jsfiddle.net/Deonis/2Lhhk/3/
содержимое контейнера "main-container" - должно отображаться в одну строку

Ответы:

Denis_

Ок, а в чем же вопрос на текущий момент? Про него вы как-то забыли )) На всякий пожарный, пока вы не дополнили, может такой вариант подойдет - http://jsfiddle.net/Deonis/2Lhhk/3/

Denis_

Что ж вы сразу не сказали, что у вас всё так запущенно? ))
Смотрите примерчик - http://jsfiddle.net/Deonis/2Lhhk/6/
Если обратите внимание, то между элементами .item, я прописал "комментарии". Как и в одних из первых моих примерах - это всё, так сказать, "лекарство" от пустых текстовых узлов, которые появляются между элементами inline-block. Можно использовать letter-spacing: -.36em, word-spacing: -.36em или font-size: 0 для родительского элемента, возвращая взятый параметр к нормальному значению уже у дочерних элементов. В вашем случае, первые два способа не подойдут, т.к. не корректно будут работать в Chrome и Opera. А вот вариант с комментариями (так называемая стыковка элементов) или font-size: 0 (http://jsfiddle.net/Deonis/2Lhhk/8/) - подойдет нормально.
Лично я бы, в данном конкретном случае, предпочел первый способ: комментарии прописывать ручками врядли придется, т.к. генерируются такие вещи на сервере в циклах, а вот избежать "нежданчика" можно ;)

11 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.