Иерархический список с кнопками

@rooten · Регистрация: 11.09.2016

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

Делаю раскрывающийся древовидный список. У каждого элемента списка есть 3 иконки, которые должны быть выровнены по правому борту стройной колонкой, вне зависимости от уровня вложености элементов. Возникает вопрос по верстке.
Пробую так:

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<div class="mylist">
        <ul class="myelements">
            <li class="">подзаголовок 1 
                <div style="">
                    <img src="~/Icons/AddIcon.png" />
                    <img src="~/Icons/AddIcon.png" />
                    <img src="~/Icons/AddIcon.png" />
                </div>
            </li>
            <li>подзаголовок 2
                <div style="">
                    <img src="~/Icons/AddIcon.png" />
                    <img src="~/Icons/AddIcon.png" />
                    <img src="~/Icons/AddIcon.png" />
                </div>
            </li>
            <li>подзаголовок 3
                <div style="">
                    <img src="~/Icons/AddIcon.png" />
                    <img src="~/Icons/AddIcon.png" />
                    <img src="~/Icons/AddIcon.png" />
                </div>
            </li>
            <li>
                подзаголовок 4
                    <div style="">
                        <img src="~/Icons/AddIcon.png" />
                        <img src="~/Icons/AddIcon.png" />
                        <img src="~/Icons/AddIcon.png" />
                    </div>
                
                <ul class="myelements">
                    <li>подзаголовок 4-1
                        <div style="">
                            <img src="~/Icons/AddIcon.png" />
                            <img src="~/Icons/AddIcon.png" />
                            <img src="~/Icons/AddIcon.png" />
                        </div>
                    </li>
                    <li>подзаголовок 4-2
                        <div style="">
                            <img src="~/Icons/AddIcon.png" />
                            <img src="~/Icons/AddIcon.png" />
                            <img src="~/Icons/AddIcon.png" />
                        </div>
                    </li>
                    <li>
                        подзаголовок 4-3
                            <div style="">
                                <img src="~/Icons/AddIcon.png" />
                                <img src="~/Icons/AddIcon.png" />
                                <img src="~/Icons/AddIcon.png" />
                            </div>
                        
                        <ul class="myelements">
                            <li>подзаголовок 4-3-1
                                <div style="">
                                    <img src="~/Icons/AddIcon.png" />
                                    <img src="~/Icons/AddIcon.png" />
                                    <img src="~/Icons/AddIcon.png" />
                                </div>
                            </li>
                            <li>подзаголовок 4-3-2
                                <div style="">
                                    <img src="~/Icons/AddIcon.png" />
                                    <img src="~/Icons/AddIcon.png" />
                                    <img src="~/Icons/AddIcon.png" />
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

CSS
1
2
3
4
5
6
7
8
9
ul.myelements > li {
    margin: 15px;
}
 
ul.myelements>li>div {
    
    display:inline-table;
    float:right;   
}

Результат как на скрине. Т.е. списочные элементы "съедают" ширину. Вопрос - как это поправить? Или такую структуру верстают не на списках (тогда буду благодарен за хороший пример)?

@aj17 · 20.03.2018, 01:17

Сообщение от rooten

Вопрос - как это поправить?

А почему бы вам не переписать эту часть кода:

CSS
1
2
3
ul.myelements > li {
    margin: 15px;
}

на эту:

CSS
1
2
3
ul.myelements>li {
    margin: 15px 0 15px;
}

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .