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

@inetinf · Регистрация: 29.07.2014

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

Доброго времени суток
подскажите как вот это меню сделать резиновым в одну строку http://menu.ihtut.net/horizont... cveta.html

@Gcom · 10.02.2016, 10:48

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

подскажите как вот это меню сделать резиновым

Смотрим:

HTML5
1
<div id="nav">

CSS
1
2
3
#nav {
    float:left;
    width:100%;

width:100% - оно должно быть резиновым, или я не совсем понял суть вопроса.

@inetinf · 10.02.2016, 10:59 **[ТС]**

при маленьком разрешении экрана разделы меню начинают переноситься в несколько строк
мне бы хотелось что бы оно масштабировалось
если это возможно

@Gcom · 10.02.2016, 11:13

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

при маленьком разрешении экрана

При каком конкретно?

Я еще раз пробежался по коду CSS там везде width:100%, следовательно везде разтягивается до нужной ширины, а переносы происходят от того что шрифт "крупный" требуется сделать адаптацию в CSS стиле, если например желаете использовать на "мобильных" устройствах.

И еще раз повторюсь можно обвернуть в div где width в CSS стиле указать нужное значение, например 400px.

@Resume · 10.02.2016, 11:14

при маленьком разрешении элементы подменю нужно расположить в вертикальном направлении. Тогда, на мой взгляд, будет нормально смотреться.

@inetinf · 10.02.2016, 11:17 **[ТС]**

попробуйте уменьшить браузер по горизонтали до первого раздела меню
и тогда остальные сместятся по вертикали
можно ли сделать что бы они в любом случае остовались горизонтально

@Resume · 10.02.2016, 11:20

ширину блока необходимо зафиксировать. К примеру,

CSS
1
2
3
#nav{
width:1024px;
}

Или в качестве альтернативы можно рассмотреть медиазапросы

@inetinf · 10.02.2016, 11:31 **[ТС]**

но тогда остальных не видно при уменьшении размера браузера((

@Fedor92 · 10.02.2016, 12:08

inetinf, Вы определитесь сначала Вам нужно адаптивное меню или масштабируемое...

Если адаптивное, то для мониторов ПК необходимо задать минимальную ширину для меню 980px(min-width:980px) , а если Вас интересует адаптивная вёрстка данного меню под различные гаджеты, то его необходимо перестроить , причём в вертикальное положение с помощью медиа-запросов... Во-первых потому-что меню не является адаптивным, а во-вторых на мобильных устройствах оно не будет выглядеть так же как на ПК...

Новые блоги и статьи Все статьи Все блоги /
Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита, которое может. . .	Команды "Заполнить" и "Очистить" на форме документа Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". На примере нетипового документа разработанного в конфигурации КА2. В качестве источника данных указан регистр накопления, в который записываются данные о. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .
Отправка уведомления на почту при изменении наименования справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере изменения наименования типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .	SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++ 8Observer8 24.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip

@inetinf 0 / 0 / 8 Регистрация: 29.07.2014 Сообщений: 514

	Сделать резиновое меню в одну строку 10.02.2016, 10:10. Показов 3343. Ответов 8 Метки нет (Все метки) Доброго времени суток подскажите как вот это меню сделать резиновым в одну строку http://menu.ihtut.net/horizont... cveta.html 0

@inetinf 0 / 0 / 8 Регистрация: 29.07.2014 Сообщений: 514
	10.02.2016, 10:59 [ТС]
	при маленьком разрешении экрана разделы меню начинают переноситься в несколько строк мне бы хотелось что бы оно масштабировалось если это возможно 0

@Resume 143 / 133 / 69 Регистрация: 08.11.2013 Сообщений: 767 Записей в блоге: 5
	10.02.2016, 11:14
	при маленьком разрешении элементы подменю нужно расположить в вертикальном направлении. Тогда, на мой взгляд, будет нормально смотреться. 0

@inetinf 0 / 0 / 8 Регистрация: 29.07.2014 Сообщений: 514
	10.02.2016, 11:17 [ТС]
	попробуйте уменьшить браузер по горизонтали до первого раздела меню и тогда остальные сместятся по вертикали можно ли сделать что бы они в любом случае остовались горизонтально 0

@inetinf 0 / 0 / 8 Регистрация: 29.07.2014 Сообщений: 514
	10.02.2016, 11:31 [ТС]
	но тогда остальных не видно при уменьшении размера браузера(( 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	10.02.2016, 12:08
	inetinf, Вы определитесь сначала Вам нужно адаптивное меню или масштабируемое... Если адаптивное, то для мониторов ПК необходимо задать минимальную ширину для меню 980px(min-width:980px) , а если Вас интересует адаптивная вёрстка данного меню под различные гаджеты, то его необходимо перестроить , причём в вертикальное положение с помощью медиа-запросов... Во-первых потому-что меню не является адаптивным, а во-вторых на мобильных устройствах оно не будет выглядеть так же как на ПК... 0