Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Отменить перенос для <li> списков

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


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

> Без описания
Поиск в теме | Версия для печати
Heavenanvil
Отправлено: 27 Марта, 2019 - 13:02:28
Post Id


Частый гость


Покинул форум
Сообщений всего: 183
Дата рег-ции: Февр. 2013  


Помог: 0 раз(а)
Здравствуйте.
Застрял на одной мелочи. Мне нужно, чтобы при изменении размера страницы, блоки состоящие из элемента «li»-списка не переносились на новую строку. Чтобы лишние либо остались как есть, либо исчезли вообще.

CODE (html):
скопировать код в буфер обмена
  1. <div class="nav">
  2.   <nav id="site-navigation" class="main-navigation">
  3.     <div class="menu-menu-1-container">
  4.       <ul id="primary-menu" class="menu">
  5.         <li id="menu-item-2" class="menu-item"><a href="#">1</a></li>
  6.         <li id="menu-item-3" class="menu-item"><a href="#">2</a></li>
  7.         <li id="menu-item-4" class="menu-item"><a href="#">3</a></li>
  8.         <li id="menu-item-5" class="menu-item"><a href="#">4</a></li>
  9.       </ul>
  10.     </div>
  11.   </nav>
  12. </div>


CODE (htmlphp):
скопировать код в буфер обмена
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5.  
  6. .nav {
  7.   width: 100%;
  8.   background: lime;
  9. }
  10.  
  11. .main-navigation {
  12.   display: inline-block;
  13.   background: cyan;
  14.   width: 100%;
  15. }
  16.  
  17. .main-navigation ul {
  18.   max-width: 700px;
  19.   list-style: none;
  20.  
  21. }
  22.  
  23. .main-navigation li {
  24.   float: left;
  25.   margin: 5px;
  26.   position: relative;
  27.   width: 150px;
  28.   background: magenta;
  29. }


Песочница «здесь»
 
 Top
Vladimir Kheifets
Отправлено: 27 Марта, 2019 - 13:28:29
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 879
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 37 раз(а)
Heavenanvil пишет:
Здравствуйте.
Застрял на одной мелочи. Мне нужно, чтобы при изменении размера страницы, блоки состоящие из элемента «li»-списка не переносились на новую строку. Чтобы лишние либо остались как есть, либо исчезли вообще.


Добрый день!
Вам нужно определить класс menu-menu-1-container
CODE (html):
скопировать код в буфер обмена
  1. .menu-menu-1-container{
  2.         height:30px;
  3.         overflow:hidden;
  4. }
Удачи!

(Отредактировано автором: 27 Марта, 2019 - 13:32:23)

 
 Top
Heavenanvil
Отправлено: 28 Марта, 2019 - 04:48:27
Post Id


Частый гость


Покинул форум
Сообщений всего: 183
Дата рег-ции: Февр. 2013  


Помог: 0 раз(а)
Vladimir Kheifets, спасибо. А можно как-то обойтись без указания высоты для этого menu-menu-1-container?

У меня есть элементы li, у которых при наведении появляются всплывающие кнопки, но если я укажу явную высоту, они не появятся.
 
 Top
Vladimir Kheifets
Отправлено: 28 Марта, 2019 - 11:35:14
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 879
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 37 раз(а)
Heavenanvil пишет:
Vladimir Kheifets, спасибо. А можно как-то обойтись без указания высоты для этого menu-menu-1-container?
У меня есть элементы li, у которых при наведении появляются всплывающие кнопки, но если я укажу явную высоту, они не появятся.

Да можно. Убрал menu-menu-1-container
Изменил
CODE (html):
скопировать код в буфер обмена
  1. .main-navigation {
  2. display: inline-block;
  3. background: cyan;
  4. width: 100%;
  5. height:30px;
  6. overflow:auto;
  7. }
и добавил js.
Спойлер (Отобразить)
Удачи!

(Отредактировано автором: 28 Марта, 2019 - 12:02:35)

 
 Top
Heavenanvil
Отправлено: 28 Марта, 2019 - 12:03:51
Post Id


Частый гость


Покинул форум
Сообщений всего: 183
Дата рег-ции: Февр. 2013  


Помог: 0 раз(а)
Vladimir Kheifets, спасибо. Очень помогли.
Жаль только, что использование своих js у нас пока недопускается.
Может есть какой-нибудь другой способ?
 
 Top
Vladimir Kheifets
Отправлено: 28 Марта, 2019 - 14:27:55
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 879
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 37 раз(а)
Heavenanvil пишет:
Vladimir Kheifets, спасибо. Очень помогли.
Жаль только, что использование своих js у нас пока недопускается.
Может есть какой-нибудь другой способ?

Есть ещё способ, не очень изящно, но работает
Цитата:
@media only screen and (min-width: 155px) {
#menu-item-1{display:block}
#menu-item-2{display:none}
#menu-item-3{display:none}
#menu-item-4{display:none}
}
@media only screen and (min-width: 310px) {
#menu-item-1{display:block}
#menu-item-2{display:block}
#menu-item-3{display:none}
#menu-item-4{display:none}
}
......................
......................

Спойлер (Отобразить)

(Отредактировано автором: 28 Марта, 2019 - 14:30:45)

 
 Top
Heavenanvil
Отправлено: 28 Марта, 2019 - 15:19:07
Post Id


Частый гость


Покинул форум
Сообщений всего: 183
Дата рег-ции: Февр. 2013  


Помог: 0 раз(а)
Vladimir Kheifets, а если количество этих элементов списка точно неизвестно?)
 
 Top
Vladimir Kheifets
Отправлено: 28 Марта, 2019 - 15:42:50
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 879
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 37 раз(а)
Heavenanvil пишет:
Vladimir Kheifets, а если количество этих элементов списка точно неизвестно?)

Количество элементов должно быть известно. Нужно программировать на РНР, например
PHP:
скопировать код в буфер обмена
  1. for ($i=1; $i<=$n; $i++)
  2. {
  3.   echo "<li id='menu-item-$i' class='menu-item'><a href='#'>$i</a></li>";
  4. }

И блоки CSS тоже
PHP:
скопировать код в буфер обмена
  1.  
  2. $W=155;
  3. for ($i=1; $i<=$n; $i++)
  4. {
  5. echo "@media only screen and (min-width: $Wpx) {";
  6. ...................
  7. ...................
  8. $W=$W+155;
  9. }

(Отредактировано автором: 28 Марта, 2019 - 15:51:09)

 
 Top
Heavenanvil
Отправлено: 29 Марта, 2019 - 04:38:00
Post Id


Частый гость


Покинул форум
Сообщений всего: 183
Дата рег-ции: Февр. 2013  


Помог: 0 раз(а)
Vladimir Kheifets, это шаблон на чистом css и html.
Поэтому PHP и JS использовать нельзя. Ладно, буду искать радикально другой способ.
В любом случае, большое спасибо за помощь. Так или иначе опыта стало немного больше)
 
 Top
teleoperator27
Отправлено: 29 Марта, 2019 - 05:45:01
Post Id



Посетитель


Покинул форум
Сообщений всего: 265
Дата рег-ции: Янв. 2017  


Помог: 21 раз(а)
Heavenanvil пишет:
Vladimir Kheifets, это шаблон на чистом css и html.
Поэтому PHP и JS использовать нельзя. Ладно, буду искать радикально другой способ.
В любом случае, большое спасибо за помощь. Так или иначе опыта стало немного больше)
без js, на истом css можно сделать только как написано в первом ответе - разрешить перенос и задать высоту родительского блока. Запретить перенос строк, но будет по пол кнопки резаться.
 
My status
 Top
Heavenanvil
Отправлено: 29 Марта, 2019 - 06:16:44
Post Id


Частый гость


Покинул форум
Сообщений всего: 183
Дата рег-ции: Февр. 2013  


Помог: 0 раз(а)
teleoperator27, да и пусть тогда режется может? Раз уж нельзя сделать, чтобы кнопка резалась целиком.
 
 Top
Vladimir Kheifets
Отправлено: 29 Марта, 2019 - 06:20:05
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 879
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 37 раз(а)
Heavenanvil пишет:
Vladimir Kheifets, это шаблон на чистом css и html.
Поэтому PHP и JS использовать нельзя. Ладно, буду искать радикально другой способ.
В любом случае, большое спасибо за помощь. Так или иначе опыта стало немного больше)
Доброе утро!
Рад, что опыта у Вас стало больше, но к сожалению Вы не написали о том, что это шаблон.
Выход часто находится там, где был вход. Концепция задачи довально странная.
Вы обрезаете меню при уменьшении ширины экрана и тем самым урезаете доступный контент сайта. Попытайтесь объяснить эта Вашему заказчику.
Удачи!
 
 Top
teleoperator27
Отправлено: 29 Марта, 2019 - 06:50:52
Post Id



Посетитель


Покинул форум
Сообщений всего: 265
Дата рег-ции: Янв. 2017  


Помог: 21 раз(а)
Heavenanvil пишет:
teleoperator27, да и пусть тогда режется может? Раз уж нельзя сделать, чтобы кнопка резалась целиком.
Странная задача, явно не продуман макет и верстка. НУ если пусть режется, то так
CODE (html):
скопировать код в буфер обмена
  1. <div class="nav">
  2.         <nav id="site-navigation" class="main-navigation">
  3.                 <div class="menu-menu-1-container">
  4.                         <ul id="primary-menu" class="menu">
  5.                                 <li id="menu-item-2" class="menu-item">
  6.                                         <a href="#">1</a></li>
  7.                                 <li id="menu-item-3" class="menu-item">
  8.                                         <a href="#">2</a></li>
  9.                                 <li id="menu-item-4" class="menu-item">
  10.                                         <a href="#">3</a></li>
  11.                                 <li id="menu-item-5" class="menu-item">
  12.                                         <a href="#">4</a></li>
  13.                         </ul>
  14.                 </div>
  15.         </nav>
  16. </div>
  17.  
  18. <style>
  19.         * {
  20.                 margin: 0;
  21.                 padding: 0;
  22.         }
  23.         .nav {
  24.                 width: 100%;
  25.                 background: lime;
  26.         }
  27.         .main-navigation {
  28.                 display: inline-block;
  29.                 background: cyan;
  30.                 width: 100%;
  31.         }
  32.         .main-navigation ul {
  33.                 max-width: 700px;
  34.                 list-style: none;
  35.                 display: block;
  36.                 overflow-x: hidden;
  37.                 white-space: nowrap;
  38.         }
  39.         .main-navigation li {
  40.                 display: inline-block;
  41.                 margin: 5px;
  42.                 position: relative;
  43.                 width: 150px;
  44.                 background: magenta;
  45.         }
  46. </style>
 
My status
 Top
Heavenanvil
Отправлено: 01 Апреля, 2019 - 05:37:39
Post Id


Частый гость


Покинул форум
Сообщений всего: 183
Дата рег-ции: Февр. 2013  


Помог: 0 раз(а)
teleoperator27, большое спасибо.
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


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



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB