Нужен совет, верстка списка

@aj17 · Регистрация: 02.06.2014

Студворк — интернет-сервис помощи студентам

Добрый вечер форумчане! Есть некий список состоящий из какого-то текста и нумерации, задача, сверстать эти точки разделители, таким образом, что бы независимо от текста будь-то одно слово или более, эти точки-разделитили как бы резинились, ну или ваш вариант, главное что бы был компактный код, вручную я могу конечно подогнать каждый блок с точками под ширину, или ставить точки в ручную, но может есть какой-то способ сделать это более изящно?

Другими словами как бы Вы сверстали)?

@Ukkas · 10.09.2014, 16:53

aj17, знаю вариант с помощью таблиц

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<table> 
    <tr>    
        <td class="text">
            text1
        </td>
        <td class="points"></td>
        <td class="number">
            56
        </td>
    </tr>
</table>    
<table>     
    <tr>    
        <td class="text">
            text111111
        </td>
        <td class="points"></td>
        <td class="number">
            5
        </td>
    </tr>
</table>    
<table>     
    <tr>    
        <td class="text">
            text
        </td>
        <td class="points"></td>
        <td class="number">
            5698
        </td>
    </tr>
</table>
<style>
table{
    width: 100%;
}
td.points{
    width: 100%;
    border-bottom: 1px dotted;
}
</style>

@Fedor92 · 10.09.2014, 17:19

На скорую руку могу предложить следующее изощрение...

HTML5
1
<span>Содержание</span><span style="width:50%; border: 1px dotted; display:inline-block;"></span><span>1</span>

Добавлено через 10 минут
Если конeчно верстаете под ie лучше задать border-bottom вместо просто border - будет ещё изящнее...

@aj17 · 10.09.2014, 17:53 **[ТС]**

Fedor92, отлично!Мне подходит! Благодарю Вас!)

@Fedor92 · 10.09.2014, 18:36

В догонку ещё один вариант изготовления содержания, если не хотите заморачиваться с подсчётом процентов резинового блока:

HTML5
1
2
3
4
5
6
7
<div width="60%">
<ul>
    <li><span>Содержание</span><span class="number">1</span></li>
    <li><span>Текст 1</span><span class="number">15</span></li>
    <li><span>Тескт2</span><span class="number">1022</span></li>
</ul>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
ul {
 
    width: 30%;
    list-style: none;
 
}
 
li {
    padding: 15px 0;
    text-align: right;
    background: url(../test/images/point.png) 0 22px repeat-x;
}
 
li span {
    float: left;
    background: #fff;
    text-align: left;
 
}
 
.number {
    float: none;
    text-align: right;
}

@Fedor92 · 10.09.2014, 18:43

Изображение точки рисуется 4 на 4 пикселя - закрашивается верхний левый пиксел в чёрный цвет и сохраняется... Подключается к бекграунду второго блока...

@aj17 · 10.09.2014, 23:15 **[ТС]**

Fedor92, Ваши труды не прошли мимо, Вы натолкнули меня на идею, как это сделать немного иначе с поддержкой ie8
CSS:

CSS
1
2
3
4
5
ul{list-style-type: none; width:90%;}
li{position:relative; border-bottom:1px dotted #000; margin-bottom:15px;}
.two{position:absolute; right:0px;}
.one{position:relative;}
.two, .one{background:#fff;display: inline-block; top:4px}

Разметка:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul>
    <li>
        <div class="one">Какой-то текст</div>
        <div class="two">[1]</div>
    </li>
    <li>
        <div class="one">Можно и больше текста в разы!!!</div>
        <div class="two">[2]</div>
    </li>
    <li>
        <div class="one">Вроде бы не плохо работает)!</div>
        <div class="two">[3]</div>
    </li>
</ul>

Добавлено через 53 минуты
Ещё один метод в копилку)Работает хорошо)! Этот вариант подходит если к примеру нужно сделать с прозрачным фоном, то есть там где уже "Схитрить", поигравшись с белым фоном, или позиционированием, не выйдет)

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.box{
    position: relative;
    clear: both;
}
.tt{float:left;}
 
.tr{
    border-bottom: 1px dotted #000;
    overflow: hidden;
    height: 14px;
    margin-right: 20px;
}
.td{
    position: absolute;
    top: 0px;
    right: 0px;
}

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="box">
    <div class="tt">Какой-то</div>
    <div class="tr"></div>
    <div class="td">[1]</div>
    
</div>
<div class="box">
    <div class="tt">Что-то ещё</div>
    <div class="tr"></div>
    <div class="td">[2]</div>
    
</div>
<div class="box">
    <div class="tt">Можно добавить текста</div>
    <div class="tr"></div>
    <div class="td">[3]</div>
</div>

@Fedor92 · 11.09.2014, 15:48

Не по теме:

aj17, главное что Вы смогли правильно обработать предложенный мной код... А то ведь встречаются на форуме люди, которым по нескольку страниц приходится разжёвывать, что к чему и всё равно они так и не понимают чего им предлагают сделать... Поэтому сразу предложил второй вариант реализации... А так мы большую с Вами тему размазали может кому из верстальщиков и пригодиться...:drink:

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130

	Нужен совет, верстка списка 10.09.2014, 16:36. Показов 1201. Ответов 7 Метки нет (Все метки) Добрый вечер форумчане! Есть некий список состоящий из какого-то текста и нумерации, задача, сверстать эти точки разделители, таким образом, что бы независимо от текста будь-то одно слово или более, эти точки-разделитили как бы резинились, ну или ваш вариант, главное что бы был компактный код, вручную я могу конечно подогнать каждый блок с точками под ширину, или ставить точки в ручную, но может есть какой-то способ сделать это более изящно? Другими словами как бы Вы сверстали)? Изображения 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	10.09.2014, 17:53 [ТС]
	Fedor92, отлично!Мне подходит! Благодарю Вас!) 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	10.09.2014, 18:43
	Изображение точки рисуется 4 на 4 пикселя - закрашивается верхний левый пиксел в чёрный цвет и сохраняется... Подключается к бекграунду второго блока... 2

@Fedor92
	11.09.2014, 15:48
	Не по теме: aj17, главное что Вы смогли правильно обработать предложенный мной код... А то ведь встречаются на форуме люди, которым по нескольку страниц приходится разжёвывать, что к чему и всё равно они так и не понимают чего им предлагают сделать... Поэтому сразу предложил второй вариант реализации... А так мы большую с Вами тему размазали может кому из верстальщиков и пригодиться...:drink: 0

Нужен совет, верстка списка

Решение