Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.75/8: Рейтинг темы: голосов - 8, средняя оценка - 4.75
 Аватар для Heidel
115 / 115 / 39
Регистрация: 11.10.2011
Сообщений: 649

Список определений с использованием стилей

09.04.2012, 17:02. Показов 1626. Ответов 8
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Для оформления шапки текста используется следующий код
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<hr />
            
            <div class="wrapper">
                <dl>
                    <dt> Название: </dt>
                    <dd> Название </dd>
                    
                    <dt> Автор: </dt>
                    <dd> Автор </dd>
                    
                    <dt> Жанр: </dt>
                    <dd> Жанр </dd>
                    
                    <dt> Персонажи: </dt>
                    <dd> Персонаж 1, Персонаж2, Персонаж3, Персонаж4, Персонаж5, Персонаж6, Персонаж7, Персонаж8 </dd> 
                    
                </dl>
            
            <hr />
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*шапка*/
.wrapper {
    width: 700px;
    margin: 0 auto;
    line-height: 1.5;
    }
 
/*оформление содержимого шапки*/  
 
dt {
    width: 200px;
    float: left;
    }
    
hr {
    width: 700px;
    text-align: center;
    margin: 0 auto;
    }
Как видно из скрина, если в теге <dd></dd> слишком много текста, он переползает на следующую строку со сдвигом.
Как можно сделать, что бы при переносе текста на следующую строку он был выровнен по первой строке?

И второй вопрос, как отрегулировать расстояние до отделяющих горизонтальных линий?
Миниатюры
Список определений с использованием стилей  
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
09.04.2012, 17:02
Ответы с готовыми решениями:

Что такое список определений?
В справочнике читаем: &lt;DL&gt; &lt;DT&gt;Определяемый термин &lt;DD&gt;определение термина &lt;/DL&gt; А что это такое по своей сути? Можно...

Как сделать раскрывающийся список определений
Здравствуйте. &lt;dl&gt; &lt;dt&gt;Термин 1&lt;/dt&gt; &lt;dd&gt;Определение термина 1&lt;/dd&gt; &lt;dt&gt;Термин 2&lt;/dt&gt; ...

DOM-узел. Создать элемент, получить список всех стилей, вывести список в внутрь данного елемента
Создать элемент `p`. По своему усмотрению задать стили (не меьше 4 параметров). Получить список всех стилей элемента (в формате...

8
 Аватар для Heidel
115 / 115 / 39
Регистрация: 11.10.2011
Сообщений: 649
09.04.2012, 17:35  [ТС]
Немного поменялся код
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="wrapper">
            
            <hr />
            
                <dl>
                    <dt> Название: </dt>
                    <dd> Название </dd>
                    
                    <dt> Автор: </dt>
                    <dd> Автор </dd>
                    
                    <dt> Жанр: </dt>
                    <dd> Жанр </dd>
                    
                    <dt> Персонажи: </dt>
                    <dd> Персонаж 1, Персонаж2, Персонаж3, Персонаж4, Персонаж5, Персонаж6, Персонаж7, Персонаж8 </dd> 
                    
                </dl>
                
            <hr />
            
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*шапка */
.wrapper {
    width: 700px;
    margin: 0 auto;
    line-height: 1.5;
    }
 
/*оформление содержимого шапки */ 
 
dt {
    width: 200px;
    float: left;
    }
 
hr {
    margin: 0 auto;
    }
но два вопроса, заданные выше, по-прежнему актуальны
0
 Аватар для Heleg
209 / 209 / 6
Регистрация: 23.10.2011
Сообщений: 971
09.04.2012, 17:43
лично я вижу здесь табличку, а не список определений. тогда все правильно отобразится.
1
 Аватар для Heidel
115 / 115 / 39
Регистрация: 11.10.2011
Сообщений: 649
09.04.2012, 17:56  [ТС]
Heleg, да, это было бы проще.
но хотелось бы по возможности допилить до красивого такой вариант.
ну и список определений имеет далеко не единственное применение)

Добавлено через 5 минут
Heleg, а хотя... спасибо
0
 Аватар для Heleg
209 / 209 / 6
Регистрация: 23.10.2011
Сообщений: 971
09.04.2012, 18:01
Цитата Сообщение от Heidel Посмотреть сообщение
Heleg, да, это было бы проще.
я говорю даже не о том,что проще, а о том, что таблицы в принципе и сделаны для того, чтобы составлять такие структуры
0
 Аватар для Heidel
115 / 115 / 39
Регистрация: 11.10.2011
Сообщений: 649
09.04.2012, 18:18  [ТС]
Heleg, да, но при правильно прописанных стилях список определений справился бы с этой задачай не хуже. к сожалению, я не знаю до конца, как это делается(
0
 Аватар для Heleg
209 / 209 / 6
Регистрация: 23.10.2011
Сообщений: 971
09.04.2012, 18:32
ну если задать dd ширину и float, а dt clear:both, можно и списками обойтись
0
 Аватар для Heidel
115 / 115 / 39
Регистрация: 11.10.2011
Сообщений: 649
10.04.2012, 11:06  [ТС]
Heleg, нет, если задать так
ну если задать dd ширину и float, а dt clear:both, можно и списками обойтись
то вообще получается чёрт знает что - как на картинке.
Таблицей, думаю, действительно будет проще сделать.
Миниатюры
Список определений с использованием стилей  
0
 Аватар для Heleg
209 / 209 / 6
Регистрация: 23.10.2011
Сообщений: 971
10.04.2012, 12:03
а такая фигня получается, если не обнулить отступы у списков, которые по умолчанию применяет к ним браузер. и hr тоже задать clear: both;
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
10.04.2012, 12:03
Помогаю со студенческими работами здесь

фон с использованием таблиц стилей
как сделать такой фон с css, градиенты тут использовать можно я так понимаю? Знаю есть утилиты для этого, но не понимаю как ими...

Нужен список стилей заливки canvas, в интернете не нашел
Здравствуйте, мне нужен полный список стилей заливки при рисовании с помощью canvas'a, с десяти вечера ищу, и нет в интернете такого. Может...

Список моих разработанных стилей во всех открывающихся документах
Доброй ночи всем. Как сделать так, чтобы во всех открывающихся документах предлагался список моих разработанных стилей. Добавлено...

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

SELECT (выпадающий список) вообще можно подвергнуть воздействию стилей?
SELECT (выпадающий список) вообще можно подвергнуть воздействию стилей? Я что то вообще ничего изменить не могу окромя шрифта...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Новые блоги и статьи
Инструменты 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, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru