ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Элементы в строку. DIV или UL
11 сообщений из 11, страница 1 из 1
Элементы в строку. DIV или UL
    #39295466
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Всем привет!

Есть задача расположить в строчку, к примеру , 3 элемента меню.
Эту задачу можно решить как с помощью div, так и с помощью ul:

Код: html
1.
2.
3.
4.
5.
<div class="inline-div">
    <div>О компании</div>
    <div>Услуги</div>
    <div>Контакты</div>
</div>


Код: css
1.
2.
3.
.inline-div { display: table; }
.inline-div div { float: left; margin-right: 20px; }
.inline-div:last-child { margin-right: 0; }



или

Код: html
1.
2.
3.
4.
5.
<ul class="inline-list">
    <li>О компании</li>
    <li>Услуги</li>
    <li>Контакты</li>
</ul>


Код: css
1.
2.
3.
.inline-list { display: table; list-style: none; }
.inline-list li { float: left; margin-right: 20px; }
.inline-list:last-child { margin-right: 0; }



Как обычно, и у того и у другого способа, наверное, есть свои плюсы и минусы.
Подводные и надводные камни. Хотелось бы узнать, какой способ предпочтительнее?
Естественно, это будет использоваться не только на таких тривиальных задачах.
Будет что-то более сложное, но смысл один: расположение каких-то элементов в строку.
...
Рейтинг: 0 / 0
22.08.2016, 13:01
| Ответить | Цитировать | Написать  
Элементы в строку. DIV или UL
    #39295485
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhayХотелось бы узнать, какой способ предпочтительнее?
Есть некое понятие " семантическая верстка " и есть мнение, что имеет смысл придерживаться ее основ.
...
Рейтинг: 0 / 0
22.08.2016, 13:20
| Ответить | Цитировать | Написать  
Элементы в строку. DIV или UL
    #39295529
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Спасибо за статью.
Но большая часть информации в ней мне знакома.

Ответ на мой вопрос в случае с меню я получил.
Но это совсем простой пример.
А как быть в случае вложенных списков?
В статье советуется по возможности минимизировать число div на странице.
Значит ли это, что предпочтительнее использовать ul вместо div, когда есть возможность?
...
Рейтинг: 0 / 0
22.08.2016, 13:52
| Ответить | Цитировать | Написать  
Элементы в строку. DIV или UL
    #39295543
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhayВ статье советуется по возможности минимизировать число div на странице.
На данный момент достаточно много элементов для разного рода информации...
urukhayЗначит ли это, что предпочтительнее использовать ul вместо div, когда есть возможность?
Если это какой-то явный список - почему бы его не оформить как список!
...
Рейтинг: 0 / 0
22.08.2016, 14:04
| Ответить | Цитировать | Написать  
Элементы в строку. DIV или UL
    #39295544
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhayА как быть в случае вложенных списков?
Таки оформить как вложенные списки... ;)
...
Рейтинг: 0 / 0
22.08.2016, 14:05
| Ответить | Цитировать | Написать  
Элементы в строку. DIV или UL
    #39295565
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
авторЕсли это какой-то явный список - почему бы его не оформить как список!
Так в том-то и дело, что это может быть не явный список.
Взять, опять же, банальный пример: слева - картинка, справа от нее - текст.
Можно и дивами, и списком.
Вот у меня вопросы вызывают как раз, такие неявные ситуации.
...
Рейтинг: 0 / 0
22.08.2016, 14:33
| Ответить | Цитировать | Написать  
Элементы в строку. DIV или UL
    #39295583
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
А можно еще пару вопросов по статье?
1. Там рекомендуется текст размещать не в div, а в p. А у меня как-то исторически сложилось размещение текста в span.
Это нормально или в данном случае, аналогично div, и не рекомендуется?
2. В статье сказано для небольших изображений не использовать img в html, а выносить в css. Насколько я понимаю, это класть изображение бэкграундом. Ок, но как тогда быть при масштабируемости (под различные разрешения). С размером такого изображения ничего нельзя будет сделать (бэкграунды не имеют размеров, они кладутся, "как есть").
...
Рейтинг: 0 / 0
22.08.2016, 15:02
| Ответить | Цитировать | Написать  
Элементы в строку. DIV или UL
    #39295612
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhayТак в том-то и дело, что это может быть не явный список.
Взять, опять же, банальный пример: слева - картинка, справа от нее - текст.
Можно и дивами, и списком.
Если текст относится к картинке... Таких "пар" на странице несколько... Они следуют "друг за другом" - думаю, что это таки список.
Список картинок с пояснительным текстом.
...
Рейтинг: 0 / 0
22.08.2016, 15:29
| Ответить | Цитировать | Написать  
Элементы в строку. DIV или UL
    #39295622
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhayА можно еще пару вопросов по статье?
Всегда нужно понимать, что статья это всего лишь статья... Практически "мнение автора". Или его понимание некой проблемы. ;)

urukhay1. Там рекомендуется текст размещать не в div, а в p. А у меня как-то исторически сложилось размещение текста в span.
Это нормально или в данном случае, аналогично div, и не рекомендуется?
span строчный элемент...
Его назначение
htmlbook.ruвыделить часть информации внутри других тегов
http://htmlbook.ru/html/span
С текстом у меня подход аналогичен работе в Ворде... Весь текст разбивается на абзацы. Потом с ними можно выполнять другие манипуляции.

urukhay2. В статье сказано для небольших изображений не использовать img в html, а выносить в css. Насколько я понимаю, это класть изображение бэкграундом. Ок, но как тогда быть при масштабируемости (под различные разрешения). С размером такого изображения ничего нельзя будет сделать (бэкграунды не имеют размеров, они кладутся, "как есть").
По изображениям не все так просто...
Ранее вообще рассматривали варианты когда пользователь вообще отключал картинки вовсе!
Сейчас наверное это отмерло...

Но смотря что ты собрался делать с теми картинками и насколько они малы.
Т.е. опять возвращаемся к поговорке "существует 100 способов как ободрать кошку"...
...
Рейтинг: 0 / 0
22.08.2016, 15:38
| Ответить | Цитировать | Написать  
Элементы в строку. DIV или UL
    #39295628
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Спасибо за ответы.
По поводу изображений - опустим этот вопрос ненадолго, т.к. чуть позже в отдельной ветке задам новый.
И там более подробно распишу.
...
Рейтинг: 0 / 0
22.08.2016, 15:43
| Ответить | Цитировать | Написать  
Элементы в строку. DIV или UL
    #39295640
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhayНасколько я понимаю, это класть изображение бэкграундом. Ок, но как тогда быть при масштабируемости (под различные разрешения). С размером такого изображения ничего нельзя будет сделать (бэкграунды не имеют размеров, они кладутся, "как есть").
И это давно уже не так... ;)
htmlbook.ru <проценты>
Задает размер фоновой картинки в процентах от ширины или высоты элемента.
http://htmlbook.ru/css/background-size
...
Рейтинг: 0 / 0
22.08.2016, 15:56
| Ответить | Цитировать | Написать  
11 сообщений из 11, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Элементы в строку. DIV или UL
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]