PHP.SU

Программирование на PHP, MySQL и другие веб-технологии

PHP.SU Портал

Главная

Помощь

Поиск

Поиск Яндекс Вакансии

Пользователи

Здравствуйте, Гость

( Вход · Регистрация · Правила форума )

Забыли пароль?

Использование dl,dd,dt для таблицы с данными

Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS (Модераторы: ALEN, armancho7777777)

Страниц (1): [1]

Без описания

Поиск в теме | Версия для печати

mstdmstd	Отправлено: 25 Сентября, 2019 - 15:00:13
Частый гость Покинул форум Сообщений всего: 170 Дата рег-ции: Авг. 2014 Помог: 0 раз(а)	Всем привет Хочу использовать dl,dd,dt как прописано тут https://onextrapixel[dot]com/how-to-[dot][dot][dot]table-list-data/ для реализации таблички с ключем и справа значения Но вствив этот код CODE (html): скопировать код в буфер обмена <dl> <dt>Name: </dt> <dd>John Don</dd> <dt>Age: </dt> <dd>23</dd> <dt>Gender: </dt> <dd>Male</dd> <dt>Day of Birth:</dt> <dd>12th May 1986</dd> </dl> и стили CODE (htmlphp): скопировать код в буфер обмена dl { margin-bottom:50px !important; } dl dt { background:#5f9be3 !important; color:#fff !important; float:left !important; font-weight:bold !important; margin-right:10px !important; padding:5px !important; width:100px !important; } dl dd { margin:2px 0 !important; padding:5px 0 !important; } в свою Bootstrap 4.3 / vuejs 2.5 страницу http://hostels2[dot]my-demo-apps[dot]tk/test вижу что поле со значением снизу а не справа как я ожидал. Как исправить? Спасибо!

LIME	Отправлено: 25 Сентября, 2019 - 16:24:42
Активный участник Покинул форум Сообщений всего: 10732 Дата рег-ции: Нояб. 2010 Помог: 322 раз(а)	float убрать

mstdmstd	Отправлено: 25 Сентября, 2019 - 16:55:36
Частый гость Покинул форум Сообщений всего: 170 Дата рег-ции: Авг. 2014 Помог: 0 раз(а)	убрал float из CODE (html): скопировать код в буфер обмена dl dt { background:#5f9be3 !important; color:#fff !important; не помогло...

LIME	Отправлено: 25 Сентября, 2019 - 18:02:22
Активный участник Покинул форум Сообщений всего: 10732 Дата рег-ции: Нояб. 2010 Помог: 322 раз(а)	скопировал разметку и стили все норм выглядит как и задумывалось с флоатом чтото еще вмешивается в стили chrome -> правая мыша -> исследовать элемент и смотри какие стили в итоге применяются или пробуй Спойлер (Отобразить) CODE (html): скопировать код в буфер обмена <style> dl.myDl { margin-bottom:50px !important; } dl.myDl dt { background:#5f9be3 !important; color:#fff !important; float:left !important; font-weight:bold !important; margin-right:10px !important; padding:5px !important; width:100px !important; } dl.myDl dd { margin:2px 0 !important; padding:5px 0 !important; } </style> <dl class="myDl"> <dt>Name: </dt> <dd>John Don</dd> <dt>Age: </dt> <dd>23</dd> <dt>Gender: </dt> <dd>Male</dd> <dt>Day of Birth:</dt> <dd>12th May 1986</dd> </dl>

mstdmstd	Отправлено: 25 Сентября, 2019 - 18:31:54
Частый гость Покинул форум Сообщений всего: 170 Дата рег-ции: Авг. 2014 Помог: 0 раз(а)	Да смотрел уже и обратил внимание на dt => display= block https://prnt[dot]sc/pav76z Но заместо указания на css файл рядом написано “user agent stylesheet” и чекбокса рядом чтобы отменить или изменить это свойство с ним нет Что это за хрень и как с этм бороться ? Или дело не в этом?

LIME	Отправлено: 25 Сентября, 2019 - 18:41:05
Активный участник Покинул форум Сообщений всего: 10732 Дата рег-ции: Нояб. 2010 Помог: 322 раз(а)	mstdmstd пишет: и обратил внимание на dt => display= block а что должно быть это же не таблица может тебе проще тогда table?

mstdmstd	Отправлено: 25 Сентября, 2019 - 18:44:51
Частый гость Покинул форум Сообщений всего: 170 Дата рег-ции: Авг. 2014 Помог: 0 раз(а)	Наверно проще Но хотел разобраться с этой dl, dd версткой ...

LIME	Отправлено: 25 Сентября, 2019 - 22:59:31
Активный участник Покинул форум Сообщений всего: 10732 Дата рег-ции: Нояб. 2010 Помог: 322 раз(а)	возможно ширины не хватает Не помещается в странице В приведенном виде отдельно от всего нет ошибок

mstdmstd	Отправлено: 26 Сентября, 2019 - 10:33:41
Частый гость Покинул форум Сообщений всего: 170 Дата рег-ции: Авг. 2014 Помог: 0 раз(а)	Непонятно. Переделал по другому . И можно еще 2 вопроса с версткой на bootstrap4/vuejs2 странице: Откройте пожалуйста страничку http://hostels2[dot]my-demo-apps[dot]tk/[dot][dot][dot]general-business 1)Как сделать чтобы на широком экране таблица с данными была на весь экран и конпка “Post New Thread” не имела под ниже пустого места ? 2)Если уменьшить экран как можно сделать чтобы текст в правой колонке списка был в одну строку а не разбивался на 3 колонки : https://prnt[dot]sc/pars09 Это реализовано кодом : CODE (html): скопировать код в буфер обмена <div class="latest_post mb-4" v-show="latestPost"> <span class="service_key_word">Latest:</span>  <span><strong>{{ latestPost.title }}</strong>, by {{ singleForumRow.creator_name }},</span> <span class="date_ago_label">{{ last_modified_label(latestPost) }}</span> </div> И это нормально работает на большом экране но не на экране меньше ... Спасибо!

Поиск в теме | Версия для печати

Страниц (1): [1]

Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)

« HTML, Дизайн & CSS »

Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.